Fast Parallax Scrolling Effect With jQuery And CSS3 - ParallaxJS
File Size: | 13.5 KB |
---|---|
Views Total: | 1334 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

ParallaxJS is a really simple jQuery plugin which applies a performant parallax scrolling effect to any DOM element using HTML5 window.requestAnimationFrame()
method and CSS3 2D transforms (translateY()
method).
How to use it:
1. Create a parallax element as follow:
<div class="cover"> <img src="img.jpg"> </div>
2. Load the latest version of jQuery library (slim build) and the JavaScript file jquery.parallax.js
at the end of the document so the page loads faster.
<script src="//code.jquery.com/jquery-3.1.1.slim.min.js"></script> <script src="jquery.parallax.js"></script>
3. Call the plugin on the element you just created to enable the parallax effect when scrolling down or up the webpage.
$('.cover').parallax();
This awesome jQuery plugin is developed by odahcam. For more Advanced Usages, please check the demo page or visit the official website.