Fast Parallax Scrolling Effect With jQuery And CSS3 - ParallaxJS

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

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.