パララックス効果の作り方｜スクロール連動の演出テクニック【コード付き】

この記事の対象: スクロール演出を実装したいフロントエンドエンジニア
読了時間: 約7分

スクロールに連動して背景と前景が異なる速度で動く——パララックス（視差効果）は、Webサイトに奥行きと没入感を加える定番のスクロール演出です。

この記事では、CSS・JavaScript・GSAPの3つのアプローチでパララックスを実装する方法を、コピペで使えるコード例とともに解説します。

パララックスとは

パララックス（Parallax）は「視差」を意味し、手前の要素と奥の要素が異なる速度で動くことで奥行きを感じさせる表現技法です。電車の車窓から見る風景のように、近くの景色は速く、遠くの景色はゆっくり流れる原理と同じです。

Webデザインでは、スクロールに連動した背景画像の移動や、要素の速度差を利用した立体的な表現に使われます。

CSSだけで実装する方法（background-attachment: fixed）

最もシンプルなパララックスは、CSSのbackground-attachment: fixedを使う方法です。

.parallax-section {
  height: 100vh;
  background-image: url('/images/hero-bg.jpg');
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
}

.content-section {
  background: #fff;
  padding: 80px 20px;
  position: relative;
  z-index: 1;
}

<section class="parallax-section"></section>
<section class="content-section">
  <h2>コンテンツセクション</h2>
  <p>スクロールすると背景が固定されたまま...</p>
</section>
<section class="parallax-section"></section>

メリット: JavaScript不要。実装が簡単。
デメリット: iOSのSafariではbackground-attachment: fixedが無効になる。モバイルでの互換性に注意。

JavaScriptで実装する方法（transform + スクロール量）

スクロール量に応じて要素のtransform: translateYを変更する方法です。モバイルでも安定して動作します。

<section class="parallax-container">
  <div class="parallax-bg" data-speed="0.5">
    <img src="/images/bg-layer.jpg" alt="">
  </div>
  <div class="parallax-content">
    <h1>パララックスデモ</h1>
  </div>
</section>

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

.parallax-bg {
  position: absolute;
  top: -20%;
  left: 0;
  width: 100%;
  height: 140%;
  will-change: transform;
}

.parallax-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.parallax-content {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

const parallaxElements = document.querySelectorAll('[data-speed]');

window.addEventListener('scroll', () => {
  const scrollY = window.scrollY;

  parallaxElements.forEach(el => {
    const speed = parseFloat(el.dataset.speed);
    const rect = el.parentElement.getBoundingClientRect();
    const offset = (rect.top + scrollY) * speed;
    el.style.transform = `translateY(${scrollY * speed - offset}px)`;
  });
}, { passive: true });

ポイント: { passive: true }を指定して、スクロールイベントのパフォーマンスを最適化しています。will-change: transformでGPUアクセラレーションを有効にするのも重要です。

GSAPのScrollTriggerで実装する方法

GSAPのScrollTriggerを使えば、スクロール位置に応じた細やかな制御が簡単に行えます。

import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';

gsap.registerPlugin(ScrollTrigger);

// 背景画像のパララックス
gsap.to('.parallax-bg', {
  yPercent: -30,
  ease: 'none',
  scrollTrigger: {
    trigger: '.parallax-container',
    start: 'top bottom',
    end: 'bottom top',
    scrub: true,
  },
});

// テキストのパララックス（速度を変える）
gsap.to('.parallax-text', {
  yPercent: -50,
  ease: 'none',
  scrollTrigger: {
    trigger: '.parallax-text',
    start: 'top bottom',
    end: 'bottom top',
    scrub: 0.5, // 0.5秒の遅延で滑らかに
  },
});

scrub: trueでスクロール位置に完全に連動し、scrub: 0.5で0.5秒の遅延をつけて滑らかな動きにできます。

GSAPの基本は「GSAP入門ガイド」で詳しく解説しています。

パララックスのパフォーマンス注意点

モバイルでの挙動

モバイルデバイスはGPU性能がPCに比べて限られるため、パララックスがカクつく原因になることがあります。

対策:
– モバイルではパララックスを無効にする（またはシンプルにする）
– will-change: transformでGPUレイヤーを明示
– { passive: true }でスクロールイベントを最適化

const isMobile = window.matchMedia('(max-width: 768px)').matches;
if (!isMobile) {
  // パララックスを初期化
}

GPU負荷

複数の大きな画像を同時にパララックスさせると、GPUメモリの消費が増えます。パララックスを適用する要素は3〜5個に抑えましょう。

`transform`を使う

topやmarginでポジションを変更するとリフロー（再レイアウト）が発生しパフォーマンスが悪化します。必ずtransform: translateY()を使用してください。

効果的な使い方と使いすぎの境界線

効果的な使い方

ファーストビューの背景画像
セクション間の仕切りとしての風景写真
テキストと画像の速度差で立体感を演出

使いすぎの境界線

ページ内のすべての要素がパララックスしている → 酔いの原因に
動きが速すぎる（speed値が大きすぎる） → 不快感の原因に
重要なコンテンツの可読性を妨げる → 本末転倒

まとめ

パララックス効果のポイントをまとめます。

CSS: background-attachment: fixedで最もシンプルに実装（iOS非対応に注意）
JavaScript: transform + scrollYでモバイル対応可能
GSAP ScrollTrigger: 最も柔軟で細やかな制御が可能
パフォーマンス: モバイルでの無効化、will-change、passiveの指定が重要
適用は3〜5要素に絞り、使いすぎを避ける