[JS]スクロールに加速やバウンドなど30以上のエフェクトを与え、位置補正もできるスクリプト -AnimateScroll
Post on:2013年7月29日
sponsors
ページ内スクロールで要素に向かって単に一定の速度でスクロールするだけでなく、加速やバウンド、ちょっと通り過ぎて戻ったりといった30種類以上のアニメーションのエフェクトをサポートしたjQueryのプラグインを紹介します。
AnimateScroll
AnimateScroll -GitHub
AnimateScrollのデモ
スクリプトのページ自体にAnimateScrollのデモが仕込まれています。
ナビゲーションの各アイテムをクリックすると、AnimateScrollでページ内スクロールします。
まずは、左から2番目の「What is it?」をクリック。
「What is it?」ではデフォルトのデモが楽しめます。
いろいろなエフェクトを楽しみたい人は、3番目の「Easing Effect」をクリック。
「Easing Effect」には3つのデモがあります。
「easeInOutBack」一旦逆にスクロールし、目的地をちょっとだけ通りすぎて戻って到着。
「easeOutBounce」目的地につくとバウンドで到着。
「easeOutElastic」はeaseInOutBackを素早くした感じです。
AnimateScrollの使い方
Step 1: 外部ファイル
jquery.jsと当スクリプトをhead内に記述します。
<head>
...
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="animatescroll.js">
</head>
Step 2: HTML（スクロール先の設定）
スクロール先の要素にidやclassを付与します。
※ページ内アンカーを考慮するとidがよいでしょう。
<body>
...
<div id="section-1">スクロール先の要素<div>
...
</body>
Step 3: スクロール元の設定
スクロール先をjQueryのセレクタで指定し、スクリプトを実行するトリガーを設定します。下記はテキストリンクで、onclickでスクロール移動します。
<a onclick="$('[id-or-class-of-element]').animatescroll();">Go to Element</a>
オプション
オプションではスクロールのスピード・エフェクト、スクロール位置の補正を設定できます。
//easeInOutBack
$('#section-2').animatescroll({scrollSpeed:2000,easing:'easeInOutBack'});
//easeOutBounce
$('#section-2').animatescroll({scrollSpeed:2000,easing:'easeOutBounce'});
//easeOutElastic
$('#section-2').animatescroll({scrollSpeed:3000,easing:'easeOutElastic'});
AnimateScrollは下記の30種類以上のエフェクトをサポートしています。
sponsors
