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.
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
02 |
< img src = "paris.jpg" alt = "Paris" data-parallax = '{"y": 230}' /> |
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 > |
This awesome jQuery plugin is developed by FadyRomany012. For more Advanced Usages, please check the demo page or visit the official website.