luxy.jsを使って慣性スクロール+パララックス【jQuery不要】

最近のWebサイトでは、慣性スクロールやパララックスでフワッと表示することが多くなってきました。
普通に下から表示させるのもいいですが、スクロール量に応じてアニメーションすると今風な感じがしますよね！

GsapのScrollTrigerでも似たようなことはできますが、”luxy.js”でとても簡単にできるので紹介します！

作成イメージ

↓スクロールできます。

参考： https://min30327.github.io/luxy.js/

上記のようなイメージです。
フワッと慣性スクロールが効いていて、スクロールに応じて動きがついています。

ダウンロード

luxy.jsのソースコードは、Githubから取得できます。
distファイル配下の圧縮版luxy.min.jsをコピーまたはダウンロードしましょう！

準備と基本操作

luxy.jsではまず初めに初期化が必要です。

_script.js

document.addEventListener("DOMContentLoaded", () => {
  luxy.init(); // 初期化
});

基本的な使い方としては、以下の通りです。
_index.html

    <ul id="luxy">
      <li class="luxy-el"><img src="./images/item-01.jpg" alt="" /></li>
      <li class="luxy-el"><img src="./images/item-02.jpg" alt="" /></li>
      <li class="luxy-el"><img src="./images/item-03.jpg" alt="" /></li>
      <li class="luxy-el"><img src="./images/item-04.jpg" alt="" /></li>
    </ul>

パララックス・慣性スクロールしたい範囲を#luxyで囲います。
その中のパララックス表示したいコンテンツに、.luxy-elを付与します。

⚠︎positionの、absoluteやfixedなどの固定要素には効かないため#luxyでラップしないようにしましょう！

ちなみに、初期化する際にオプションで任意のものに変更も可能です。
_srcipt.js

document.addEventListener("DOMContentLoaded", () => {
  luxy.init({
    wrapper: "#luxy", // 慣性スクロール範囲(単数付与)
    targets: ".luxy-el", // パララックスの要素(複数付与)
    wrapperSpeed: 0.15, //スクロールするスピード
  });
});

今回は、id、クラス名等は変更せずに行います！

パララックスの動かし方

主に4つの動かし方を覚えるだけでいいです！超簡単！！

①
data-speed-y・・・パララックスの視差効果の速度の指定（垂直方向）
data-offset・・・表示位置のオフセットを指定

②
data-horizontal・・・横方向に動かす場合は”1”を指定する
data-speed-x・・・横方向に動かす際の速度の指定（水平方向）

垂直方向に動かす場合は①のみ、水平方向に動かす際は、①＋② or ②のみ を取り入れればOKです！

また、座標の動かし方の考え方についてはcssと同じです！正の値が、下 or 右方向ですね。

<div id="luxy">
  <!-- 上に移動 -->
  <div class="luxy-el" data-speed-y="20">~コンテンツ~</div>
  <!-- 下に移動 -->
  <div class="luxy-el" data-speed-y="-20">~コンテンツ~</div>
  <!-- 右に移動 -->
  <div class="luxy-el" data-horizontal="1"  data-speed-x="20">~コンテンツ~</div>
  <!-- 左に移動 -->
  <div class="luxy-el" data-horizontal="1"  data-speed-x="-20">~コンテンツ~</div>
</div>

デモ画面

＊PCのみの対応となっているため、スマホの方はPCでご確認ください🙇‍♂️
あまり詰め込みすぎると重くなってしまうので、実際では要所要所で使うのがいいかと思います。
↓スクロールできます。

◆デモサイトはこちら
◆コードはこちら

パララックスの指定を、画像に指定するのか、liタグのようなアイテム要素に指定するのかも十分注意しましょう。
指定する要素は、4つしかないため動かしながら確認することをお勧めします！

タブレット・スマホは実行しない

タブレットやスマホだとかなり重くなってしまい、ユーザビリティが良くありません。
タブレット以下は、実行しないようにしましょう！
_script.js

if (window.matchMedia("(min-width: 1025px)").matches) {
  luxy.init();
}

まとめ

慣性スクロール・パララックスについて紹介しました。
覚えることも少ないためとても簡単にいい感じのアニメーションが作れます！

ただ、最初は余白が空いたり思うように動かないこともあるため手を動かして試してみましょう🙌