慣性スクロールのアニメーション用jQueryプラグイン
##Depends
- jQuery 1.9.1
IE10+ and other new browsers.
key | Value | initial value |
---|---|---|
parent | body直下のすべてのコンテンツを囲う要素を指定 | none |
childDelta1 | 少ないと滑らかになる、大きいと進みすぎるので注意 | 0.02 |
childDelta2 | 子要素のスクロールスピード、大きすぎると滑らかさが無くなる | 0.1 |
parentDelta | parentのスクロールスピード | 0.08 |
key | Value | initial value |
---|---|---|
data-speed | 各要素のスクロールスピードを個別に変更出来る | 1 |
data-margin | 各要素のtranslate3dの値の切片を設定出来る | 0 |
<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>
Copyright(c) 2016 Go Nishiduka Licensed under the MIT license.