 |
| Image Effects ParallaxBlurScale In jQuery Plugin |
New jQuery parallax plugin that applies configurable and smooth parallax setting 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.
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,
});
Live Demo
See the Pen Image Effects Parallax/Blur/Scale In jQuery Plugin by Plugin JS (@pluginjs) on CodePen.
File Info
- File Name :
- jquery-parallax-main.zip
- Size :
- 5.51KB
- Site Download :
- Github.com
- Official Website:
- Go to website
- License:
- MIT