animate parallax scroll - Free Download Animate Elements With Parallax Scroll Effects - parallax-scroll

Free Download Animate Elements With Parallax Scroll Effects – parallax-scroll

Posted on

This time I will share jQuery Plugin and tutorial about Animate Elements With Parallax Scroll Effects – parallax-scroll, hope it will help you in programming stack.

animate parallax scroll - Free Download Animate Elements With Parallax Scroll Effects - parallax-scroll
File Size: 4.37 KB
Views Total: 2122
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.

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

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

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
01 <article>
02   <img src="paris.jpg" alt="Paris" data-parallax='{"y": 230}'/>
03   <p>Paris</p>
04 </article>
05  
06 <ul data-parallax='{"y": 300, "from-scroll": 645, "duration": 150}'>
07   <li data-parallax='{"x": -650, "from-scroll": 80, "distance": 30}'>A</li>
08   <li data-parallax='{"x": -650, "from-scroll": 100, "distance": 60}'>B</li>
09   <li data-parallax='{"x": -650, "from-scroll": 120, "distance": 90}'>C</li>
10   <li data-parallax='{"x": -650, "scaleX":0.5, "from-scroll": 140, "distance": 120}'>D</li>
11   <li data-parallax='{"x": -650, "scale":0.6, "from-scroll": 160, "distance": 180}'>E</li>
12 </ul>

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

source : jquery.net