参考： 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でご確認ください🙇‍♂️
あまり詰め込みすぎると重くなってしまうので、実際では要所要所で使うのがいいかと思います。
↓スクロールできます。

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