This time I will share jQuery Plugin and tutorial about Performant Parallax Scrolling Plugin with jQuery and CSS3, hope it will help you in programming stack.
Just another jQuery parallax scrolling plugin which applies customizable parallax scrolling effects to background images using requestAnimationFrame and CSS3 3D transforms.
How to use it:
1. Add a background image to the container and specify the scrolling speed & direction using html5 data attributes like this:
1 |
<div id="parallax-image" |
2 |
data-parallax data-speed="0.15" |
4 |
style="background-image:url('1.jpg');"> |
2. Load the jQuery Parallax plugin after jQuery JavaScript library but before the closing body tag.
1 |
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script> |
2 |
<script src="dist/jquery-parallax.js"></script> |
3. Initialize the plugin and done.
1 |
$('[data-parallax]').jQueryParallax(); |
This awesome jQuery plugin is developed by ryanknights. For more Advanced Usages, please check the demo page or visit the official website.
