Lightweight Kinetic Scrolling / Parallax Plugin With jQuery - inertiaScroll

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.

See also:

• Lightweight Momentum Scrolling And Parallax Plugin With jQuery - parachutejs
• jQuery Plugin For Adding Momentum Scrolling To Web Content - scrollEasing
• Smooth Momentum Scrolling Effect with jQuery - Momentum Scroll

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.

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

2. Config the parallax scrolling effect for each element using the HTML data attributes as show below:

<div id="box1" class="box" data-speed="1" data-margin="100"></div>
<div id="box2" class="box" data-speed="7"></div>
<div id="box3" class="box" data-speed="2"></div>
<div id="box4" class="box" data-speed="5"></div>
<div id="box5" class="box" data-speed="3" data-margin="200"></div>
<div id="box6" class="box" data-speed="1"></div>
<div id="box7" class="box" data-speed="2"></div>
<div id="box8" class="box" data-speed="8"></div>
<div id="box9" class="box" data-speed="1"></div>

3. Active the plugin by calling the function on the target element.

$(".box").inertiaScroll();

4. Possible plugin to config the Kinetic Scrolling / Parallax effects.

$(".box").inertiaScroll({
  parent: "",
  childDelta1: 0.02,
  childDelta2: 0.1,
  parentDelta: 0.08
});

Change log:

2017-10-23

• JS update

2017-05-24

• fixed for IE11.

---

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