Performant Parallax Scrolling Plugin with jQuery and CSS3

File Size: 9.47 KB
Views Total: 3509
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Performant Parallax Scrolling Plugin with jQuery and CSS3

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:

<div id="parallax-image" 
     data-parallax data-speed="0.15" 
     data-direction="up" 
     style="background-image:url('1.jpg');">
</div>

2. Load the jQuery Parallax plugin after jQuery JavaScript library but before the closing body tag.

<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="dist/jquery-parallax.js"></script>

3. Initialize the plugin and done.

$('[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.