簡単に慣性スクロールを実装！パララックスも実装できて一石二鳥な「Luxy.js」をご紹介！【jQuery非依存】

ウェブサイトを見ていてスクロールが滑らかだったり、画像などのコンテンツが他と違う動きであらわれたりしておしゃれだなと見入ってしまうことはないでしょうか？
繰り返しスクロールで行ったり来たりして、サイト自体の動きを楽しんでしまうこともしばしばあります、私は。

それらの動きは「慣性スクロール」や「パララックス」といって、マウスで実際に動かした分よりも少し遅めにスクロールが反応し余韻が残るような効果を出す動作や、各コンテンツを異なる速度で移動させる動作などを指しています。

慣性スクロールがあることで、コンテンツをスムーズに閲覧できたり、演出と組み合わせることで世界観や没入感を表現することが可能になります。
また、macOSに比べるとWindowsはデフォルトでスクロールしたときにカクカクと動くため、慣性スクロールを実装するとユーザー環境にとらわれず、滑らかにスクロールさせることができます。

この慣性スクロールを簡単に実装できる「Luxy.js」というプラグインを今回はご紹介。
また、慣性スクロールだけでなく、「パララックス」も一緒に実装できるという優れもの！
パララックスがあるとサイトに奥行きが出てページの世界観も広がります。

パララックスやってみたいけど、難しそうなんだよな…と、手を出せないでいる方も簡単に実装できるのでぜひ試してみてほしいです！

Luxy.jsを実装しよう！

Luxy.js

まずはLuxy.jsをダウンロードしてきましょう。
配布元ページでカッコよく実装していますし、簡単に使い方もまとめて載せてくれていて親切なのでご参考に。

Luxy.jsはjQuery非依存（jQueryの読み込み不要）なのもポイントですね。

JSファイルのダウンロードはGitHubからおこないます。（dist/js）
処理速度が気になる方はluxy.min.jsも落とせます。

ダウンロードしたファイルは階層を合わせて読み込みましょう。

<script type="text/javascript" src="/assets/js/luxy.min.js"></script>

ファイルを読み込んだら、下記のスクリプトコードを書き記します。

<script>
 window.onload = function() {
  luxy.init();
 }
</script>

次に、効果を付けたい部分にid「luxy」を付けます。
これでid「luxy」内に慣性スクロールが効くようになりました。簡単！
JSファイルを読み込み、IDで囲うだけで簡単に使えるのはありがたいです。

なお、luxyで囲んだ箇所は「position:fixed」が付きますので、固定要素は包含しないようにご注意ください。
※position:fixed;やbackground-attachment:fixed;の要素にはパララックス効果が表れません

パララックス効果を付けたい要素にはクラス「luxy-el」を付与します。

<div id="luxy">
 <div class="luxy-el"></div>
</div>

ちなみに、このサイトでもluxyを実装しているのですが、他の実装との関係でLuxyのパララックスは使用せずに、他のプラグインでパララックスを実装しています。
両方できる優れもの！と言っておいて慣性スクロールのみ使用という贅沢使いですが、裏を返せば、他のパララックスのプラグインとも喧嘩せず使えるということです。ね！

パララックスのオプション

パララックス効果は速度や位置などを細かく指定できるオプションが用意されています。
以下にまとめましたので、参考にしていただければ！

・data-offset
ピクセル単位のオフセット（座標、表示位置）を指定できます

・data-speed-y
垂直方向のパララックススクロール効果の速度を指定できます

・data-horizontal
「1」に設定すると、水平視差スクロールを有効にできます

・data-speed-x
水平方向のパララックススクロール効果の速度を指定できます

「class=”luxy-el”」に続けて「data-speed-y=”40″ data-offset=”0″」のように、必要なオプションを書いていってください。

PCのみで、このjsを動かしたい場合

このサイトでもLuxyをしようしていると言いましたが、スマホで見ると動きが逆にスムーズではないな…と言う悩みが出てきました。
スマホでは慣性スクロールが元から機能しているものも多く、それと相性があまりよくないようです。

なので、PCだけでLuxyを動かすことにしました。
jsでスマホ・タブレット・PCそれぞれを判定し、PCの場合は先に書いたluxyを動かす記述を入れます。

  var ut = navigator.userAgent;
  if (ut.indexOf('iPhone') > 0 || ut.indexOf('iPod') > 0 || ut.indexOf('Android') > 0 && ut.indexOf('Mobile') > 0) {
  } else if (ut.indexOf('iPad') > 0 || ut.indexOf('Android') > 0) {
  } else {
    window.onload = function () {
      luxy.init();
    }
  }

if内が「スマホ」、else if内が「タブレット」、else内が「それ以外（PC）」になります。
このプラグインに限らず、デバイスによって出し分けたいときにも重宝しますので、覚えておいて損はないと思います。

ちなみに、この方法だと、Luxyのパララックスを使っている場合はPC以外それも無効になるのでご注意を！

慣性スクロールの注意点

慣性スクロールは上手に使うと気持ちがいい演出になる一方、移動量が強すぎるとスクロールを止めたいと思った時にスクロールしすぎてしまい、かえって中身が読みづらくなるのでユーザーにとってストレスになる場合もあります。

私の印象ですが、Macで純正品マウス「Magic Mouse」を使用されてる方の方が、より慣性スクロールを好むように思います。
Windows環境の方やMacでも純正品でないマウス（Logicoolなど）を使用されている方は、そもそも慣性スクロールにあまり馴染みがなく必要性を感じないからだと思います。
むしろ止まりたいところを過ぎてしまい、いらないと感じる場面があるのも確かです。

そのほかにも、高速でスクロールするとコンテンツが早く動いて視覚的に混乱することもあるため、使い所は慎重に決める必要がありますし、スクロールの余韻具合も配慮が必要です。

ワンランク上のサイトを！

とは言うものの、動きのあるサイトはユーザーの目を楽しませるのも事実です。
スクロールをスムーズにしてくれる慣性スクロールもユーザーの手助けになる場面も少なくないでしょう。

サイトの魅力を増す要素として「Luxy.js」を実装してみるのもいいかもしれないです。

追記：Mac環境で純正品でないマウスでも慣性スクロールを利用したい方へ

慣性スクロールつながりで少し話が脱線しますが、Mac環境で純正品でないマウスを使用していても慣性スクロールを利用したいという方もいると思います。
それを叶えてくれるアプリ「Mos」をご紹介した記事もありますので、そちらをご参考にしていただければ嬉しいです。

Macで非純正マウスでもスムーズなスクロールが可能に！「Mos」で自分好みのスクロールをカスタマイズ。