This time I will share jQuery Plugin and tutorial about Lightweight Kinetic Scrolling / Parallax Plugin With jQuery – inertiaScroll, hope it will help you in programming stack.
inertiaScroll is a very small (4kb, unminfied) jQuery plugin which enables a “momentum” style scrolling experience (aka. Kinetic Scrolling & InertiaScroll ) on the native browser scroll and adds configurable parallax scrolling effects on individual elements using HTML data attributes.
How to use it:
1. Place the latest version of jQuery library and the jQuery inertiaScroll plugin’s script at the bottom of the html page.
1 |
<script src="//code.jquery.com/jquery.min.js"></script> |
2 |
<script src="jquery-inertiaScroll.js"></script> |
2. Config the parallax scrolling effect for each element using the HTML data attributes as show below:
1 |
<div id="box1" class="box" data-speed="1" data-margin="100"></div> |
2 |
<div id="box2" class="box" data-speed="7"></div> |
3 |
<div id="box3" class="box" data-speed="2"></div> |
4 |
<div id="box4" class="box" data-speed="5"></div> |
5 |
<div id="box5" class="box" data-speed="3" data-margin="200"></div> |
6 |
<div id="box6" class="box" data-speed="1"></div> |
7 |
<div id="box7" class="box" data-speed="2"></div> |
8 |
<div id="box8" class="box" data-speed="8"></div> |
9 |
<div id="box9" class="box" data-speed="1"></div> |
3. Active the plugin by calling the function on the target element.
1 |
$(".box").inertiaScroll(); |
4. Possible plugin to config the Kinetic Scrolling / Parallax effects.
1 |
$(".box").inertiaScroll({ |
Change log:
2017-10-23
2017-05-24
This awesome jQuery plugin is developed by underground0930. For more Advanced Usages, please check the demo page or visit the official website.
