簡単に慣性スクロールを実装できる「luxy.js」

慣性スクロールとは

ウェブサイトをスクロールする際、指を離してもスクロールがスムーズに続く現象を
「慣性スクロール」と呼びます。
これは、ユーザーがページをより自然な動きで操作できるようにするための技術です。
慣性スクロールは、ウェブサイトのユーザーエクスペリエンスを向上させ、
ユーザーにとっての操作感を向上させます。
スマートフォンで使われているので、みなさんも一度は見たことがあるかと思います。

Luxy.jsとは

Luxy.jsは、慣性スクロールきるJavaScriptライブラリです。
Luxy.jsを使用すると、ウェブサイトやウェブアプリケーションに
スムーズな慣性スクロール効果を追加することができます。
このライブラリは、シンプルで軽量でありながら、
高度な慣性スクロール機能を実装出来ます。
使用例はデモサイトをご覧ください。

Luxy.jsの利用方法

1. 公式サイトからluxy.min.jsをダウンロードし、サーバにアップロードします。
2. ダウンロードしたjavascriptを読み込ませます。
   また、Luxy.jsを起動するスクリプトを書きます。
   

   <script type="text/javascript" src="luxy.min.js" charset="utf-8"></script>
   <script charset="utf-8">
   luxy.init();
   </script>

   
   
3. 慣性スクロールを適用したい部分を下記のHTMLタグで囲います。

   <div id="luxy">
   	<!-- 慣性スクロールしたいコンテンツ -->
   </div>

   
   

以上で慣性スクロールの実装は完了です。
一部のブロックだけずらして表示したい場合は、下記のようにずらしたいブロックにクラス「luxy-el」を設置し、
ずらすスピードと表示位置を調整することで出来ます。

<div class="luxy-el" data-speed-y="<!-- ずらすスピード -->" data-offset="<!-- 表示位置 -->"></div>

まとめ

Luxy.jsを利用することで、ウェブサイトやウェブアプリケーションにスムーズな慣性スクロール効果を追加することができます。 簡単にサイトのクオリティを上げることが出来ますので、ぜひ使ってみてくださいね。