GSAPで作る滑らかな逆スクロールパララックス

CSS、JavaScript
2,953 文字 約 8 分で読めます

スクロールに合わせて背景が動く「パララックス効果」は、Webサイトに立体感や奥行きを与える定番演出です。その中でも、スクロール方向とは逆に背景が動く「逆スクロールパララックス」は、より印象的で視覚的に引き込まれる動きを演出できます。

この記事では、GSAP（GreenSock Animation Platform） と ScrollTrigger を使い、画面サイズを変えても安定して滑らかに動く逆スクロールパララックスの実装方法を紹介します。

サンプル

↓スクロールして下さい。

See the Pen 110603 by kasasagi_kmnmc (@kasasagi_kmnmc) on CodePen.

HTML構造

まずは背景画像を含むセクションと、その後に本文コンテンツを用意します。

<section class="parallax-container">
  <img
    src="https://images.unsplash.com/photo-1507525428034-b723cf961d3e?q=80&w=1600&auto=format&fit=crop&ixlib=rb-4.0.3"
    alt="砂浜と空"
    class="parallax-image"
  >
</section>

<div class="content">
  <h1>ここから本文</h1>
  <p>スクロールすると、空が見えてきます。</p>
</div>

CSS

画像をセクション全体に広げ、滑らかに動かすためのスタイルを指定します。

body {
  margin: 0;
  height: 200vh;
  font-family: sans-serif;
}

.parallax-container {
  position: relative;
  height: 200vh;
  overflow: hidden;
}

.parallax-image {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left bottom;
  top: 0;
  left: 0;
  transform: translateY(0) scale(1.6);
  transform-origin: left bottom;
  will-change: transform;
}

.content {
  height: 100vh;
  background: #fff;
  padding: 50px;
}

『object-fit: cover; 』を設定することで、背景画像は常にセクション全体を覆い、リサイズしても余白が出にくくなります。さらに、object-position: left bottom; を追加すると、画像の表示位置を左下に固定でき、砂浜や地面など見せたい部分を画面に常に表示できます。

GSAP

ライブラリ読み込み（別で設置）

<!-- GSAP本体 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
<!-- ScrollTriggerプラグイン -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>

※これらは <head> か <body> の末尾で一度読み込めばOKです。

アニメーション設定（別ファイルまたはscriptタグ内）

GSAPとScrollTriggerを読み込み、スクロール量に応じて背景画像を逆方向に動かす設定をします。

gsap.registerPlugin(ScrollTrigger);

gsap.to(".parallax-image", {
  yPercent: 150, // 背景がスクロールと逆方向に動く
  ease: "none",
  scrollTrigger: {
    trigger: ".parallax-container",
    start: "top top",
    end: "bottom top",
    scrub: true,
    invalidateOnRefresh: true, // リサイズ時に再計算
  }
});

ポイントは yPercent: 150 です。これにより、スクロール方向とは逆に背景が動く「逆スクロールパララックス」が実現できます。

動きの確認

このコードをCodePenなどで実行すると、下方向にスクロールするたびに背景が上方向にゆっくりと動きます。まるで砂浜から空へ視線が引き上げられるような、自然で立体的な印象を演出できます。

補足

今回の方法では object-fit: cover と invalidateOnRefresh により、画面サイズが変わっても余白が出ず、動きが安定します。
必要であれば、背景画像の拡大率（scale）を調整することで、動きの余裕や切れにくさをコントロールすることもできます。

.parallax-image {
  transform: translateY(0) scale(1.6); /* 少し余裕を持たせる */
}

これにより、動きの範囲を確保しても切れにくくなります。

まとめ

GSAPとScrollTriggerを使えば、滑らかで自由度の高い逆スクロールパララックスを簡単に実装できます。yPercent の値を調整することで背景がスクロール方向とは逆に動く量や速度をコントロールでき、視線誘導や印象的な演出にも最適です。

さらに、object-fit: cover と invalidateOnRefresh を組み合わせることで、画面サイズが変わっても余白が出ず、動きが安定するため、どんなデバイスでも美しい逆スクロールパララックスを表現することができます。

タイトルとURLをコピーしました