🌟
【JS】縦スクロールで横にスクロール
縦にスクロールして横にスクロールされるコンテンツを実装してみました
gsapを使って実装しています。
自分で使い方をまとめた記事：
JSの実装
gsap.set()でwrap要素の横幅と、itemの横幅を設定します。
gsap.set(items, { width: 100 / num + "%" });
itemsの中身はノードリストですが、gsap.set()はノードリストを配列のように扱えるため、itemsの中の各要素（item）にプロパティを設定します。
注意！！
ノードリストは、配列のようにインデックスでアクセスできますが、配列メソッドの一部しか使えません（例えば、forEachは使えますが、mapやfilterは使えません）。
使えない場合は、、Array.fromやスプレッド構文でノードリストを配列に変換して使います。
itemsに対してアニメーションを設定します。
- xPercentプロパティを使って、アイテム全体を横方向に移動させます。今回、アイテムが3つなので-200%に設定されます。
- easeプロパティを"none"に設定することで、アニメーションにイージング効果を適用させません。
scrollTriggerオプションを設定します。
- trigger: スクロールアニメーションを開始するトリガー要素を指定します。ここではarea要素を指定しています。
- start: スクロールアニメーションの開始位置を指定します。"top top"は、トリガー要素のトップとビューポートのトップが揃う位置です。
- end: スクロールアニメーションの終了位置を指定します。"+=1000"は、トリガー要素の開始位置から1000ピクセル先までを終了位置とします。
- pin: トリガー要素を固定（ピン留め）します。
- scrub: スクロール量に応じてアニメーションが進行するようにします。スクロールする速度に応じてアニメーションが動きます。
Discussion