Animate Elements With Parallax Scroll Effects - parallax-scroll

Animate Elements With Parallax Scroll Effects - parallax-scroll
File Size: 4.37 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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.