Image Parallax/Blur/Scale Effects In jQuery - Parallax
File Size: | 5.93 KB |
---|---|
Views Total: | 1637 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
A fresh new jQuery parallax plugin that applies a configurable and smooth parallax scrolling animations to images on scroll, plus blur and scale effects.
Powered by CSS3 transitions and transforms. Great for showing off your latest work, or just spicing up the occasional page element.
See Also:
How to use it:
1. Load the parallax plugin after loading the latest jQuery library.
<!-- Slim build is recommended --> <script src="/path/to/cdn/jquery.slim.min.js"></script> <!-- jQuery parallax plugin --> <script src="dist/jquery-parallax.js"></script>
2. Add a group of absolutely positioned images to the page.
<img src="1.jpg" alt="Parallax Image 1" /> <img src="2.jpg" alt="Parallax Image 2" /> <img src="3.jpg" alt="Parallax Image 3" /> ...
img { max-width:300px; display:block; position:absolute; top:200px; left:200px; }
3. Config the parallax/blue/scale effects for each image.
var data = [ {speed:30,blur:3,scale:.8}, {speed:40,index:2}, {speed:30,blur:2,scale:.7}, // ... ];
4. Apply the parallax scrolling effect to the images.
$('img').each(function(i,o){ $(this).parallax(data[i]); });
5. All possible plugin options.
$("img").parallax({ // animation speed in pixels speed: 30, // or "x" axis: "Y", // scale factor scale: 1, // z-index index: 0, // delay in seconds delay: 1.4, // blur level blur: 0, // disable on mobile mobile: false, });
This awesome jQuery plugin is developed by paxagency. For more Advanced Usages, please check the demo page or visit the official website.