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

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再計算処理、できれば画像の事前読み込みが必要という感じです。

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

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

<!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://source.unsplash.com/a1BlhTu0lMI/" data-y="-20vw">
  </div>

  <div class="content">
    <div class="item">
      <div class="image js-parallax">
        <img src="https://source.unsplash.com/500x500/?Fashion" 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://source.unsplash.com/500x500/?Nature" 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://source.unsplash.com/500x500/?Fashion" 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://source.unsplash.com/38Pkx1dnyQU/">
  </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>
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

目次