GSAP ScrollTriggerでパララックスを作る

2022-03-112022-11-28

当ページのリンクには広告が含まれています。

使い方の説明はこちら

GSAP ScrollTriggerを試してみたらすごく簡単でした GSAP ScrollTriggerが簡単で面白いという話を聞いたので触ってみました。 GSAPのライセンスは顧客から料金を徴収しないWebサイトであれば問題ないですが、プラグインに...

GSAP ScrollTriggerでパララックスが必要になったのでサンプルを作りました。
セクションの区切りに使っている背景だけを動かす予定でしたが、とりあえず専用classを設定したら何でも動くように作っています。

See the Pen GSAP ScrollTrigger Image Parallax by hakoirioyaji (@hakoirioyaji) on CodePen.

gsap.registerPlugin(ScrollTrigger);

gsap.utils.toArray('.js-parallax').forEach(wrap => {
  const y = wrap.getAttribute('data-y') || -100;
  
  gsap.to(wrap, {
    y: y,    
    scrollTrigger: {
      trigger: wrap,
      start: 'top bottom',
      end: 'bottom top',
      scrub: 0.5,
      //markers: true
    }
  })
});

スクロール量に合わせて動作するscrubがポイントで、数値を減らすと早くなり、多くするとゆっくり動きます。

HTML側からy値を調整できるようにしてみましたが、レスポンシブ対応を考えるとパラメーターが不足していますし、ウインドウリサイズ時のScrollTrigger再計算処理、できれば画像の事前読み込みが必要という感じです。

これぐらいの動作であれば別のライブラリを入れる必要もないのでシンプルなサイトならサクッと作れそうです。

あわせて読みたい

GSAP ScrollTriggerで文字列置換処理を作る GSAP ScrollTriggerでスクロールすると文字列*が元の文字に置き換わる処理を書いてみました。Type1とType2はテキストの置き換え処理が少し違うだけです。 See the Pen G...

コピペで試せるソースコード

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>GSAP ScrollTrigger Parallax</title>
  <style>
    html {
      font-size: 10px;
    }

    body {
      padding: 0;
      margin: 0;
      font-size: 1.6rem;
      background-color: #1d1d1d;
    }

    .space {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      background-color: #333;
      color: #fff;
    }

    .separate {
      overflow: hidden;
      height: 30vw;
    }

    .separate img {
      width: 100%;
    }

    .content {
      padding: 10vw 5% 5vw;
      background: #fff;
    }

    .item {
      display: flex;
      flex-wrap: nowrap;
      margin-bottom: 10vw;
    }

    .item:nth-child(odd) {
      flex-direction: row-reverse;
    }

    .item .image {
      width: 35%;
      max-height: 300px;
      height: 15vw;
      overflow: visible;
    }

    .item .image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 8px;
    }

    .item .text {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      width: 50%;
      margin: 0 5%;
      background: #eee;
      border-radius: 8px;
    }
  </style>
</head>

<body>
  <div class="space">
    <h1>GSAP ScrollTrigger Parallax</h1>
  </div>

  <div class="separate">
    <img class="js-parallax" src="https://images.unsplash.com/photo-1513635269975-59663e0ac1ad?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1000&q=80" data-y="-20vw">
  </div>

  <div class="content">
    <div class="item">
      <div class="image js-parallax">
        <img src="https://images.unsplash.com/photo-1483985988355-763728e1935b?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1000&q=80" alt="">
      </div>
      <div class="text js-parallax" data-y="-50">
        <p>Fashion</p>
      </div>
    </div>

    <div class="item">
      <div class="image js-parallax">
        <img src="https://images.unsplash.com/photo-1465146344425-f00d5f5c8f07?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1000&q=80" alt="">
      </div>
      <div class="text js-parallax" data-y="-50">
        <p>Nature</p>
      </div>
    </div>

    <div class="item">
      <div class="image js-parallax" data-y="-100">
        <img src="https://images.unsplash.com/photo-1445205170230-053b83016050?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1000&q=80" alt="">
      </div>
      <div class="text js-parallax" data-y="-50">
        <p>Fashion</p>
      </div>
    </div>
  </div>

  <div class="separate">
    <img class="js-parallax" data-y="-20vw" src="https://images.unsplash.com/photo-1540959733332-eab4deabeeaf?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1000&q=80">
  </div>

  <div class="space">END</div>
  
  <script src='https://cdn.jsdelivr.net/npm/gsap@3.7.0/dist/gsap.min.js'></script>
  <script src='https://cdn.jsdelivr.net/npm/gsap@3.7.0/dist/ScrollTrigger.min.js'></script>
  <script id="rendered-js">
    gsap.registerPlugin(ScrollTrigger);

    gsap.utils.toArray('.js-parallax').forEach(wrap => {
      const y = wrap.getAttribute('data-y') || -100;

      gsap.to(wrap, {
        y: y,
        scrollTrigger: {
          trigger: wrap,
          start: 'top bottom',
          end: 'bottom top',
          scrub: 0.5
          //markers: true
        }
      });

    });
  </script>
</body>

</html>