パララックス(GSAP)

説明

スクロールの動きに合わせて画像も少し動きます。

サンプル

使用するライブラリ

gsap.js

scrollTrigger.js

公式サイト:https://greensock.com/

手順

手順1

gsap.js、scrollTrigger.jsをプロジェクトに含めます。

NPM、CDN、アセットをローカルでダウンロードする方法があります。

手順説明ではCDNで読み込んでいきます。

CDNのgsap.js、scrollTrigger.jsを使用する

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/ScrollTrigger.min.js"></script>

手順2(HTML)

動かす画像のimgタグをdivで囲い、クラス名js-parallaxを付けておきます。

<div class="example js-parallax"><img src="hoge.jpg" alt=""></div>

手順3(CSS)

手順2で囲った要素にheightとoverflowを指定します。

height: 240px;
overflow: hidden;

手順3(JS)

クラスにjs-parallaxが付いている要素のimgタグに動くよう記述していきます。

const targets = document.querySelectorAll('.js-parallax');

targets.forEach((target) => {
 gsap.fromTo(target.querySelector('img'), {
  y: 0,
 }, {
  y: -60, // y方向-に60px移動させる
  ease: "none", // イージングなし
  scrollTrigger: {
   trigger: target, // ScrollTriggerの開始位置を計算するために使用される要素
   start: "top bottom", // 1つ目の値がtriggerで指定した要素の開始位置　2つ目の値が画面の開始位置
   end: "bottom top", // 1つ目の値がtriggerで指定した要素の終了位置　2つ目の値が画面の終了位置
   scrub: 1, // 要素を1秒遅れで追従させる
   // markers: true, // 開始位置、終了位置を調整確認する際に使用します
  }
 }); 
});

参考文献

・GreenSock公式 ScrollTrigger Document