慣性スクロールのjsプラグイン

慣性スクロールのjsプラグイン

今週はスクロールの動きの参考をご紹介します。

慣性スクロールとは…

主にマルチタッチインターフェースで採用されている機能で、画面を素早くスクロールさせた際、指を画面から離しても急には止まらず、慣性が作用しているようにスクロールがある程度維持される機能のことである。

だそうですiPhoneやAppleのMagic Mouseを使っている人は想像しやすいかと思います。スクロールしたときに、通常はスクロールした分だけしか画面が動きませんが、慣性スクロールの場合は、スクロールを止めてもふわっと動く、そんなイメージです。

言葉で説明するのは難しいので、こちらのサイトで実感してみてください!

ADJUVANT CLEAR GEL(アジュバン クリアジェル)-ずっと 肌カ 美しく

この動きについてですが、「Luxy.js」というプラグインを使用すると簡単に実装できるようです。

使い方については、こちらのブログでわかりやすく紹介されていたのでご参考に。

1点注意があり、こちらのプラグインは適応させたい範囲を<div id="luxy">で囲む必要がありますが、cssの記述でposition: fixed などの固定要素を入れると、うまく動作しないようです。そのため、固定したい要素(ヘッダーなど)は除外して適応範囲を囲む必要があります。

実装じたいはそんなに難しくないので、これを導入するだけでサイトの雰囲気が一気に変わりますね!

以上、本日は慣性スクロールのjsプラグインをご紹介しました!