ブログ

GSAPで実装するシンプルなパララックスアニメーション

おしゃれなサイトでよく見る、画像のパララックスアニメーションの実装方法について解説しています。

この記事で解説しているパララックスとは、スクロールした際に画像が遅れて移動する動きを指します。WEBサイトに奥行きが生まれて、よりリッチなイメージを演出することができます。実装にはGSAPを使用しています。

実装例

下記が実装例です。

GSAPで実装したパララックス

2パターンを用意しており、①デフォルトではy軸の移動量を5%/画像の拡大率を1.1倍/遅延を1.5秒、②カスタムした場合ではy軸の移動量を10%/画像の拡大率を1.2倍/遅延を2.5秒に設定しています。

解説

HTMLは次のとおりです。

HTML
<!-- デフォルト -->
<figure class="img" data-parallax>
  <img src="https://picsum.photos/800/500/?random=1" alt="画像" />
</figure>


<!-- カスタムする場合 -->
<figure class="img" data-parallax data-y="10%" data-scale="1.2" data-delay="2.5">
  <img src="https://picsum.photos/800/500/?random=1" alt="画像" />
</figure>

パララックスさせたい画像の親要素にdata-parallax属性を付与しています。カスタムする場合はdata-yで移動量を、data-scaleで拡大率を、data-delayで遅延時間をそれぞれ設定できるようにしています。

GSAPの処理を言語化

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

JavaScript
const items = document.querySelectorAll("[data-parallax]"); // data-parallax属性を持つ要素を取得


// 各パララックス要素に対して処理を行う
for (const item of items) {
  const y = item.getAttribute("data-y") ?? "5%"; // itemのdata-y属性を取得。未設定の場合は'5%'をデフォルト値として使用
  const scale = item.getAttribute("data-scale") ?? "1.1"; // itemのdata-scale属性を取得。未設定の場合は'1.1'をデフォルト値として使用
  const delay = parseFloat(item.getAttribute("data-delay")) || 1.5; // itemのdata-delay属性を数値に変換して取得。未設定の場合は'1.5'をデフォルト値として使用
  const img = item.querySelector("img"); // itemの中にあるimg要素を取得


  gsap.set(item, { overflow: "hidden" }); // itemのoverflowをhiddenに設定
  gsap.set(img, { scale: scale }); // imgのscaleに上記で設定した「scale」を適用


  gsap.fromTo(
    // gsap.fromToでアニメーションを設定
    img, // 対象の要素をimgで指定
    {
      y: `-${y}`, // アニメーション開始時のy位置
    },
    {
      y: y, // アニメーション終了時のy位置
      scrollTrigger: {
        // スクロールトリガーを設定
        trigger: item, // itemをトリガーとなる要素として指定
        start: "top bottom", // 要素の上端がビューポートの下端に達したときに開始
        end: "bottom top", // 要素の下端がビューポートの上端に達したときに終了
        scrub: delay, // スクロールに追従してアニメーションを行う（デフォルトでは1秒の遅延）
      },
      ease: "none", // イージング関数を指定しない（線形アニメーション）
    }
  );
}

各行の実行内容はコメントに記載の通りです。

JavaScriptのNull合体演算子を用いて、y軸の移動量(y)と拡大率(scale)と遅延時間(delay)の初期値を設定しています。GSAPではfromToを使用し、アニメーション前後のCSSプロパティを指定しています。

scrollTriggerではscrubを使用し、スクロール量に応じて各プロパティをアニメーションさせています。scrubはデフォルトでは1.5秒遅延させています。

easeはnoneを指定することで、アニメーションの変化の速度を一定に保っています。noneを指定しないと画像がビューポートの上部に来た際のアニメーションが緩やかになってしまします。

今回は移動量と拡大率と遅延時間のみをカスタマイズできるようにしてみました。より細かな制御をしたい場合は、simpleParallax等のライブラリを使用することをおすすめします。

参考サイト

キーワード一覧