【jQuery】jquery-inertiaScrollで慣性スクロールを実装する方法

今回はスクロールを滑らかにさせるjQueryプラグイン「jquery-inertiaScroll」を使って慣性スクロールを実装する方法を紹介します。

 

ダウンロード

githubにて配布されているので、そのままダウンロードしましょう。

https://github.com/underground0930/jquery-inertiaScroll

 

jquery-inertiaScrollの使い方

jquery-inertiaScrollを使って慣性スクロールを実装するには、body直下に<div id=”wrap”>を作成します。これは全体を囲む要素になります。

HTML

<!-- wrapですべてコンテンツを囲む -->
<div id="wrap">
  <header>Header</header>
  <main>
    <section>1</section>
    <section>2</section>
    <section>3</section>
    <section>4</section>
    <section>5</section>
  </main>  
  <footer>Footer</footer>
</div>

 

id=”wrap”に慣性スクロールをかけていきます。

jQuery

$(function(){
  $('header, main, footer').inertiaScroll({
    parent: $("#wrap")

    //オプションを追加する場合はここに追記

  });
});

 

jQueryのセレクタには#wrapの子要素を指定し、オプションでparent: $(“#wrap”)と指定しています。parentには親要素を指定します。

これだけで慣性スクロールが実装できます。セクションが増えた場合はその都度jQueryオブジェクトに追加すればokです。

 

オプション

jquery-inertiaScrollにはparentの他にも様々なオプションが用意されています。

  • parent:body直下の全てを囲むタグを指定
  • childDelta1:スクロールスピードを変更する。値が小さいとより滑らかに、大きいと進む量が多くなる
  • parentDelta:parentで指定したタブのスクロールスピードを調整

 

また、jquery-inertiaScrollにはdata属性が用意されています。HTMLに記述することで指定可能です。

  • data-speed:要素のスクロールスピードを個別に変更できる
  • data-margin:要素のtranslate3dの値を指定できる

 

まとめ

jquery-inertiaScrollを使って慣性スクロールを実装する方法でした。

スクロールが滑らかになるだけでかなりおしゃれなサイトに早変わりできるので、サイトの雰囲気に合わせて導入してみるといいでしょう。