ブログ

スクロールすると要素が固定され後続の要素が重なるアニメーション

おしゃれなサイトでよく見る、スクロールに応じて要素が固定され後続の要素が重なるアニメーションの実装方法について解説しています。実装にはGSAPを使用しています。

実装例

下記が実装例です。

スクロールすると要素が固定され後続の要素が重なるアニメーション

スクロールに応じて数字を配置したボックスエリアが固定され、後続のボックスエリアが上に重なるようにしてアニメーションしています。

アニメーションを指定していない場合と比較して、より長くボックスエリアを見させることができるので、重要なセクションなどに使用すると効果的かもれません。

解説

CSSで重要な点は、固定する要素とその直下の小要素の高さをビューポートの高さに設定することです。こうすることで画面いっぱいで重なるアニメーションを実現することができます。

親要素と小要素の高さを100svhで固定
  .section {
    height: 100svh;
    /* 以下省略 */
  }


  .section__inner {
    height: inherit;
    /* 以下省略 */
  }

ScrollTriggerの処理を言語化

GSAPのScrollTriggerでは以下のコードを実行しています。

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は親要素の範囲に収まります）。

参考サイト

キーワード一覧