🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

inertiaScroll is a jQuery plugin which enables "momentum" style scrolling and configurable parallax scrolling effects on your webpage.

smooth-scroll parallax Momentum-Scrolling

Documentation

jquery-inertiaScroll

慣性スクロールのアニメーション用jQueryプラグイン

Demo

demo

##Depends

  • jQuery 1.9.1

Browsers

IE10+ and other new browsers.

Options

key Value initial value
parent body直下のすべてのコンテンツを囲う要素を指定 none
childDelta1 少ないと滑らかになる、大きいと進みすぎるので注意 0.02
childDelta2 子要素のスクロールスピード、大きすぎると滑らかさが無くなる 0.1
parentDelta parentのスクロールスピード 0.08

data Attribute

key Value initial value
data-speed 各要素のスクロールスピードを個別に変更出来る 1
data-margin 各要素のtranslate3dの値の切片を設定出来る 0

Usage

  <div id="content">     <header>header!</header>     <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>     <div id="box10" class="box" data-speed="5"></div>     <footer>footer!</footer>   </div>   	<script> 	$(function(){  	  $(".box").inertiaScroll({ 	    parent: $("#content") 	  });  	});   	</script>   

Lisence

Copyright(c) 2016 Go Nishiduka Licensed under the MIT license.


You May Also Like