[JS]スクロールに加速やバウンドなど30以上のエフェクトを与え、位置補正もできるスクリプト -AnimateScroll

ページ内スクロールで要素に向かって単に一定の速度でスクロールするだけでなく、加速やバウンド、ちょっと通り過ぎて戻ったりといった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="$('&#91;id-or-class-of-element&#93;').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種類以上のエフェクトをサポートしています。

サイトのキャプチャ

Easing function

top of page

©2017 coliss