スクロールすると要素が固定され後続の要素が重なるアニメーション
おしゃれなサイトでよく見る、スクロールに応じて要素が固定され後続の要素が重なるアニメーションの実装方法について解説しています。実装にはGSAPを使用しています。
実装例
下記が実装例です。
スクロールに応じて数字を配置したボックスエリアが固定され、後続のボックスエリアが上に重なるようにしてアニメーションしています。
アニメーションを指定していない場合と比較して、より長くボックスエリアを見させることができるので、重要なセクションなどに使用すると効果的かもれません。
解説
CSSで重要な点は、固定する要素とその直下の小要素の高さをビューポートの高さに設定することです。こうすることで画面いっぱいで重なるアニメーションを実現することができます。
.section { height: 100svh; /* 以下省略 */ }
.section__inner { height: inherit; /* 以下省略 */ }ScrollTriggerの処理を言語化
GSAPのScrollTriggerでは以下のコードを実行しています。
ScrollTrigger.create({ trigger: section, start: "bottom bottom", onEnter: () => { gsap.set(inner, { position: "fixed", bottom: 0, }); }, onLeaveBack: () => { gsap.set(inner, { position: "absolute", bottom: "auto", }); }, });section要素をトリガーにし、トリガーの底部がビューポートの底部に到達した時点でアニメーションが発動します。
onEnterでスクロールトリガーが発動した時の処理を定義しています。inner要素のpositionを固定し、bottomを0に設定しています（つまりinnerは親要素に関係なく画面いっぱいで固定されます）。
onLeaveBackでスクロール方向が負（上方向）で、スクロールトリガーの発動条件を満たさなくなった場合の処理を定義しています。inner要素のpositionの固定を解除し、bottomをautoに設定しています（つまりinnerは親要素の範囲に収まります）。