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

1
<!-- デフォルト -->
2
<figure class="img" data-parallax>
3
  <img src="https://picsum.photos/800/500/?random=1" alt="画像" width="800" height="500" decoding="async" />
4
</figure>
5

6
<!-- カスタム -->
7
<figure class="img" data-parallax data-y="10%" data-scale="1.2" data-delay="2.5">
8
  <img src="https://picsum.photos/800/500/?random=1" alt="画像" width="800" height="500" decoding="async" />
9
</figure>

1
const mm = gsap.matchMedia();
2

3
mm.add("(prefers-reduced-motion: no-preference)", () => {
4
  const items = document.querySelectorAll("[data-parallax]"); // data-parallax属性を持つ要素を取得
5

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

13
    gsap.set(item, { overflow: "hidden" }); // itemのoverflowをhiddenに設定。ちらつきが発生する場合はCSSで設定
14
    gsap.set(img, { scale: scale }); // imgのscaleに上記で設定した「scale」を適用
15

16
    gsap.fromTo(
17
      // gsap.fromToでアニメーションを設定
18
      img, // 対象の要素をimgで指定
19
      {
20
        y: `-${y}`, // アニメーション開始時のy位置
21
      },
22
      {
23
        y: y, // アニメーション終了時のy位置
24
        scrollTrigger: {
25
          // スクロールトリガーを設定
26
          trigger: item, // itemをトリガーとなる要素として指定
27
          start: "top bottom", // 要素の上端がビューポートの下端に達したときに開始
28
          end: "bottom top", // 要素の下端がビューポートの上端に達したときに終了
29
          scrub: delay, // スクロールに追従してアニメーションを行う（本実装の初期値は1.5秒）
30
        },
31
        ease: "none", // イージング関数を指定しない（線形アニメーション）
32
      },
33
    );
34
  }
35
});