縦スクロール中にコンテンツを横スクロールさせる方法【GSAPを使おう】
縦スクロール中に任意のコンテンツの始点に到着したらそのコンテンツを横にスクロールさせたい。
本記事ではJavaScriptのライブラリ【GSAP】とGSAPのライブラリ【ScrollTrirrer】を使って、このような悩みを解決します。
実装サンプル
See the Pen
縦スクロール途中から横スクロールを入れる方法 by Kohei (@kouk05)
on CodePen.0
実装サンプルです。
縦スクロール中にあるコンテンツ位置まできたら横スクロールされてる事がわかります。
実装方法は以下の通りです。
GSAPをCDNで読み込む
<!-- GSAP CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<!-- GSAP ScrollTrirrer CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
まず最初に、GSAPとGSAP ScrollTrirrerのCDNを実装環境に設置します。
横スクロールさせる要素をHTMLで用意
<!-- 横スクロール -->
<div class="h-scroll">
<!-- 横スクロール内側 -->
<div class="h-scroll-inner">
<!-- スクロールさせる要素 -->
<div class="h-scroll-list">
<div class="scrollitem">
<img src="https://placehold.jp/400x250.png" alt="">
</div>
<div class="scrollitem">
<img src="https://placehold.jp/400x250.png" alt="">
</div>
<div class="scrollitem">
<img src="https://placehold.jp/400x250.png" alt="">
</div>
<div class="scrollitem">
<img src="https://placehold.jp/400x250.png" alt="">
</div>
<div class="scrollitem">
<img src="https://placehold.jp/400x250.png" alt="">
</div>
<div class="scrollitem">
<img src="https://placehold.jp/400x250.png" alt="">
</div>
<div class="scrollitem">
<img src="https://placehold.jp/400x250.png" alt="">
</div>
</div>
</div>
</div>
次に横スクロールさせる要素を下記条件のもとHTMLで用意します。
横スクロールさせる要素（h-scroll-listクラス）
横スクロールさせる要素を内包する要素（h-scroll-innerクラス）
上記の親要素（h-scrollクラス）
※クラス名は任意の名前で大丈夫です。
GSAPを定義。横スクロールを実行
//横スクロールさせる要素の親要素
const trigger = document.querySelector('.h-scroll');
//横スクロールさせる要素を内包する要素
const inner = document.querySelector('.h-scroll-inner');
//横スクロールさせる要素
const list = document.querySelector('.h-scroll-list');
gsap.to(list,{
x: () => -(list.clientWidth - inner.clientWidth),
scrollTrigger: {
trigger: trigger,
start: 'top top',
end: () => '+=' + (list.clientWidth - inner.clientWidth),
scrub: 1,
pin: true,
anticipatePin: 1,
markers: false
},
});
最後にGSAPで横スクロールを実装します。
前章で用意したHTML要素を変数指定。
gsap.toメソッドを使い、第一引数に横スクロールのターゲットとなる要素を指定。
第二引数にscrollTriggerオブジェクトを指定。
上記コードを参考にscrollTriggerのオプションを入れて実装完了です。
まとめ
GSAPを使って、縦スクロール中にコンテンツを横スクロールさせる方法について紹介しました。
以上で解説を終わります。
目次