Animate Elements With Parallax Scroll Effects - parallax-scroll

A lightweight, fast, smooth, and fully configurable parallax scroll plugin to animate DOM elements on scroll using CSS3 2D/3D transforms and requestAnimationFrame API.

How to use it:

1. Load the JavaScript file jquery.parallax-scroll.js after jQuery.

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

2. Load the jQuery easing plugin for additional easing functions (OPTIONAL).

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>

3. Add the data-parallax attribute to th desired element and config the parallax scroll effect using the following options.

• 'x': x-axis property
• 'y': y-axis property
• 'z': z-axis property
• 'rotateX': rotateX property
• 'rotateY': rotateY property
• 'rotateZ': rotateZ property
• 'scaleX': scaleX property
• 'scaleY': scaleY property
• 'scaleZ': scaleZ property
• 'scale': scale property
• 'from-scroll': from which position
• 'duration': duration in ms
• 'smoothness': smoothness
• 'easing': easing function

<article>
  <img src="paris.jpg" alt="Paris" data-parallax='{"y": 230}'/>
  <p>Paris</p>
</article>

<ul data-parallax='{"y": 300, "from-scroll": 645, "duration": 150}'>
  <li data-parallax='{"x": -650, "from-scroll": 80, "distance": 30}'>A</li>
  <li data-parallax='{"x": -650, "from-scroll": 100, "distance": 60}'>B</li>
  <li data-parallax='{"x": -650, "from-scroll": 120, "distance": 90}'>C</li>
  <li data-parallax='{"x": -650, "scaleX":0.5, "from-scroll": 140, "distance": 120}'>D</li>
  <li data-parallax='{"x": -650, "scale":0.6, "from-scroll": 160, "distance": 180}'>E</li>
</ul>

---

This awesome jQuery plugin is developed by FadyRomany012. For more Advanced Usages, please check the demo page or visit the official website.