【2026年最新】パララックススクロール完全ガイド｜HTML・CSSで基本から応用まで初心者でも作れる実装方法

2025年10月20日

生徒

ペン博士！WebサイトにパララックスのスクロールEffectを入れてみたいんですが、HTMLやCSSでどう書けばいいか全然わからなくて困っています……。

ペン博士

パララックス効果じゃな！仕組みさえ理解すれば、初心者でもすぐに作れるぞ！CSSだけで実装できる方法もあるから、しっかり覚えていくんじゃぞ！

生徒

CSSだけでできるんですね！ぜひ教えてください！

スクロールに合わせて背景がゆっくり動く「パララックス効果」、おしゃれなWebサイトでよく見かけるけれど、HTMLやCSSでどうやって実装するのかわからない…と悩んでいませんか？

実は、パララックス効果はCSSの数行で実現できます。この記事では、パララックス効果の基本的な仕組みから実際のコード例、レスポンシブ対応・JavaScriptを使った応用方法まで、初心者でも迷わず実装できるようにステップごとに解説します。

「学習→案件獲得」につなげた受講生のリアルな体験談も公開中！働き方を変えたい方にも響くストーリーです。

片山さん
妊娠をきっかけに、子どものためにどこでも働けるスキルを身に付けたいと考える。オンラインスクールのfammで1ヶ月間Web制作を学び、その後独学で励むも限界を感じ、案件保証が魅力のWithCodeへ入学。稼げる力を身に付け、現在は副業として10件以上の案件を担当するまでに成長した。

詳しくはこちらの記事をご覧ください。

📋 この記事でわかること

パララックス効果とは何か・どんなサイトで使われているか
CSSだけで実装するbackground-attachmentの使い方
JavaScriptを使ったより滑らかなパララックスの作り方
レスポンシブ対応・スマホでの注意点
よくある実装ミスとその解決策

パララックス効果とは？基本の仕組みをわかりやすく解説

パララックス（Parallax）とは、視差（視点の位置によって見え方が変わる現象）を意味する言葉です。Webデザインにおけるパララックス効果とは、スクロールしたときに背景と前景が異なる速度で動くことで、奥行きや立体感を演出するテクニックのことを指します。

たとえば、ページをスクロールしたときにコンテンツは通常の速さで流れていく一方、背景画像はゆっくりと動く——このズレが「視差」を生み出し、視覚的なダイナミズムと没入感を与えます。

パララックス効果が使われる主なシーン

企業・ブランドのランディングページ（LP）
ポートフォリオサイト・クリエイターの作品紹介ページ
観光・旅行・飲食店のプロモーションサイト
ゲームや映画などのティザーサイト

視覚的なインパクトが大きいため、ユーザーの滞在時間向上やブランドイメージの強化にも効果的とされています。

スクロール演出をさらに広げたい場合は、@keyframesによるアニメーションやスクロールでふわっと表示するフェードインも組み合わせると表現の幅が広がります。

【最も簡単】CSSのbackground-attachmentでパララックスを実装する方法

パララックス効果を実装する最もシンプルな方法は、CSSのbackground-attachment: fixed;プロパティを使う方法です。JavaScriptを一切使わずに実現できます。

基本のHTML構造

<!-- パララックスセクション -->
<section class="parallax-section">
  <div class="parallax-content">
    <h2>パララックス効果のサンプル</h2>
    <p>スクロールして背景の動きを確認してみましょう</p>
  </div>
</section>

<!-- 通常のコンテンツセクション -->
<section class="normal-section">
  <p>通常のスクロールコンテンツです。</p>
</section>

<!-- 2つ目のパララックスセクション -->
<section class="parallax-section parallax-section--second">
  <div class="parallax-content">
    <h2>2つ目のパララックスセクション</h2>
  </div>
</section>

基本のCSS（background-attachment: fixed）

/* パララックスセクションの基本スタイル */
.parallax-section {
  background-image: url('images/parallax-bg.jpg');
  background-attachment: fixed;   /* ← これがパララックスの核心 */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* テキストコンテンツの見やすさを確保 */
.parallax-content {
  text-align: center;
  color: #ffffff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

.parallax-content h2 {
  font-size: 2.5rem;
  margin-bottom: 16px;
}

/* 通常セクション */
.normal-section {
  padding: 80px 40px;
  background-color: #ffffff;
  text-align: center;
  font-size: 1.1rem;
  line-height: 1.8;
}

/* 2つ目のパララックス：別の画像を設定 */
.parallax-section--second {
  background-image: url('images/parallax-bg2.jpg');
}

ポイントはbackground-attachment: fixed;の1行だけです。このプロパティを指定すると、背景画像がビューポート（画面）に対して固定され、コンテンツだけがスクロールするためパララックス効果が生まれます。

background-attachmentの各値の違い

値	動作	主な用途
`scroll`（デフォルト）	背景がコンテンツと一緒にスクロールする	通常の背景画像
`fixed`	背景がビューポートに固定される	パララックス効果
`local`	背景が要素のスクロールに追従する	スクロール可能なボックス内

JavaScriptを使ったより滑らかなパララックス実装

background-attachment: fixedはシンプルですが、iOSのSafariでは動作しないという有名な問題があります（後述）。より幅広いブラウザ・デバイスに対応し、スクロール速度を細かく調整したい場合は、JavaScriptで実装する方法がおすすめです。

JavaScriptによるパララックス実装コード

スクロール量に応じて背景要素を transform: translate3d() で動かす方法です。requestAnimationFrame でスクロール処理を描画に同期させて間引くことで、カクつきの少ない滑らかな動きを実現できます。background-attachment: fixed と違い、iOS Safari でも問題なく動作するのが大きな利点です。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>JavaScriptパララックスサンプル</title>
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }

    .parallax-wrapper {
      position: relative;
      height: 500px;
      overflow: hidden;            /* はみ出た背景を隠す */
    }

    .parallax-bg {
      position: absolute;
      top: 0; left: 0;
      width: 100%;
      height: 130%;                /* 動く分だけ余白を持たせる */
      background: url('images/bg.jpg') center / cover no-repeat;
      will-change: transform;      /* GPU 合成でカクつきを軽減 */
    }

    .parallax-content {
      position: relative;
      z-index: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
      color: #fff;
      text-shadow: 0 2px 8px rgba(0,0,0,.6);
    }
  </style>
</head>
<body>
  <section class="parallax-wrapper">
    <div class="parallax-bg" data-speed="0.3"></div>
    <div class="parallax-content"><h2>Parallax Sample</h2></div>
  </section>

  <script>
    const bg = document.querySelector('.parallax-bg');
    let latestY = 0, ticking = false;

    function update() {
      const speed = parseFloat(bg.dataset.speed) || 0.3;
      // スクロール量 × 速度だけ背景を上へ動かす
      bg.style.transform = `translate3d(0, ${latestY * speed}px, 0)`;
      ticking = false;
    }

    window.addEventListener('scroll', () => {
      latestY = window.scrollY;
      // requestAnimationFrame で描画に同期させ処理を間引く
      if (!ticking) {
        window.requestAnimationFrame(update);
        ticking = true;
      }
    }, { passive: true });
  </script>
</body>
</html>

ポイントは3つです。①overflow: hidden で余分な背景を隠す、②背景に height: 130% のように余白を持たせて動く分を確保する、③requestAnimationFrame でスクロールイベントを間引いて負荷を下げる——この設計にすることで、60fps に近い滑らかなパララックスになります。

【応用】CSS transform と perspective で作る3Dパララックス

perspectiveとtranslateZで3Dの奥行きを作るレイヤー構造の図解

より奥行きのある立体的なパララックスを作りたいなら、perspective と translateZ を組み合わせた3D手法が有効です。JavaScript を使わず、CSSだけで要素ごとに異なる奥行きを表現できます。

3Dパララックスの仕組み

親要素に perspective（視点からの距離）を指定し、子要素に translateZ() で奥行きを与えます。手前の要素ほどスクロールで速く動き、奥の要素はゆっくり動くため、自然な視差が生まれます。

.scene {
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  perspective: 10px;          /* 視点からの距離。小さいほど効果が強い */
  perspective-origin: center;
}

.layer {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}

/* 奥のレイヤー：ゆっくり動く */
.layer--back  { transform: translateZ(-10px) scale(2); }
/* 中間レイヤー */
.layer--mid   { transform: translateZ(-5px)  scale(1.5); }
/* 手前のレイヤー：等倍・通常速度 */
.layer--front { transform: translateZ(0); }

translateZ でマイナス方向に動かすと要素が奥に下がって小さく見えるため、scale() で見かけの大きさを補正します。スクロール処理を一切書かずにGPUだけで完結するため非常に軽量で、モダンブラウザなら60fpsで滑らかに動きます。

position: sticky を使ったモダンなスクロール演出

近年のWebデザインでは、position: sticky を使ったパララックス風の演出も定番です。要素をスクロール中に一定位置で「貼り付け」、背後のコンテンツだけを流すことで、レイヤーが重なるような奥行き表現ができます。

.sticky-section {
  position: sticky;
  top: 0;
  height: 100vh;
  display: grid;
  place-items: center;
}

/* 後ろのセクションが sticky 要素の上に重なって流れる */
.next-section {
  position: relative;
  z-index: 1;
  background: #fff;
  min-height: 100vh;
}

sticky は JavaScript 不要で、スクロール連動の重い処理を避けられるのが利点です。「カードが重なって進むLP」「章ごとに背景が切り替わる記事」などに向いています。

【2026年最新】CSSスクロール駆動アニメーションでJavaScriptなしのパララックス

近年もっとも注目されているのが、CSSスクロール駆動アニメーション（Scroll-driven Animations）です。animation-timeline プロパティを使えば、JavaScriptを一切書かずにスクロール量と連動したパララックスを実装できます。Chrome・Edge 115以降、Firefox・Safari も対応が進み、2024年以降のモダンブラウザで広く使えるようになりました。

scroll() タイムライン：スクロール全体に連動させる

animation-timeline: scroll() を指定すると、アニメーションの進行が「時間」ではなく「スクロール位置」に紐づきます。スクロールを止めれば背景も止まり、戻せば背景も戻る——完全にスクロールと同期した動きになります。

.parallax-bg {
  position: absolute;
  inset: 0;
  background: url('images/bg.jpg') center / cover no-repeat;

  /* スクロール量に応じて背景を上へ動かす */
  animation: parallax-move linear both;
  animation-timeline: scroll(root block); /* ページ全体のスクロールに連動 */
}

@keyframes parallax-move {
  from { transform: translateY(0); }
  to   { transform: translateY(-20%); } /* 前景より遅く動かして視差を作る */
}

scroll(root block) は「ルート要素の縦スクロール」を基準にするという意味です。animation-timeline に紐づくアニメーションは自動でスクロール位置＝進捗に変換されるため、requestAnimationFrame のような処理を書く必要がありません。

view() タイムライン：要素が画面に入る動きに連動させる

animation-timeline: view() は、その要素がビューポートに入ってから出るまでを進捗にします。画像が画面に入るあいだだけゆっくり動く、写真ギャラリーのような自然な視差に最適です。

.gallery-img {
  animation: img-parallax linear both;
  animation-timeline: view();          /* 要素が可視範囲にある間だけ進行 */
  animation-range: entry cover exit;   /* 入り始め〜抜け切りまでを範囲に */
}

@keyframes img-parallax {
  from { transform: translateY(-12%) scale(1.1); }
  to   { transform: translateY(12%)  scale(1.1); }
}

animation-range で「どのタイミングからどこまで」を細かく指定できるのが強力です。JSのIntersectionObserver＋scrollイベントで書いていた処理が、CSS数行に置き換わるのが最大のメリットです。

未対応ブラウザへのフォールバック

Safari など一部環境ではまだ未対応の場合があります。@supports で分岐すれば、対応ブラウザだけ視差を有効化し、未対応環境では通常表示に安全にフォールバックできます。

@supports (animation-timeline: scroll()) {
  .parallax-bg {
    animation: parallax-move linear both;
    animation-timeline: scroll(root block);
  }
}

「JSなし・軽量・スクロール完全同期」の三拍子がそろうのがスクロール駆動アニメーションの魅力です。これから新規に実装するなら、まずこの手法を第一候補に検討する価値があります。

パフォーマンスとアクセシビリティを両立させる最適化テクニック

パララックス最適化の3原則（GPU合成・イベント間引き・prefers-reduced-motion）の図解

パララックスは見栄えが良い反面、実装を誤るとスクロールのカクつき・スマホの発熱・乗り物酔いを招きます。公開前に必ず次の3点を押さえておきましょう。

① will-change と translate3d で GPU 合成に載せる

位置を動かすときは top/left ではなく transform: translate3d() を使います。レイアウトの再計算（リフロー）が発生せず、GPU の合成レイヤーだけで処理されるため滑らかになります。will-change: transform を添えると、ブラウザが事前に最適化を準備します。

② スクロールイベントは requestAnimationFrame で間引く

scroll イベントは1秒間に何十回も発火します。毎回DOMを触ると重くなるため、requestAnimationFrame でフレームに同期させ、リスナーには { passive: true } を付けてスクロールをブロックしないようにします。

③ prefers-reduced-motion で「動きを減らす」設定を尊重する

OSの「視差効果を減らす／アニメーションを減らす」設定を有効にしているユーザーには、アニメーションを止めるのがアクセシビリティの基本です。次のメディアクエリで簡単に対応できます。

/* ユーザーが「動きを減らす」設定なら視差を無効化 */
@media (prefers-reduced-motion: reduce) {
  .parallax-bg,
  .layer {
    transform: none !important;
    transition: none !important;
  }
}

この配慮はSEO・LLMOの観点でも重要です。検索エンジンやAIは、アクセシビリティに配慮した高品質なページを評価する傾向が強まっています。

iOS Safari で background-attachment: fixed が効かない問題と回避策

CSSだけで作る background-attachment: fixed のパララックスには、iOS Safari（iPhone/iPad）では固定背景が動作しないという有名な制約があります。パフォーマンス上の理由で意図的に無効化されており、背景がスクロールに追従してしまいます。

回避策1：擬似要素＋fixed 背景に置き換える

背景を要素本体ではなく ::before 擬似要素に position: fixed で敷く方法です。多くの環境で fixed 背景と近い見た目を再現できます。

.parallax-section {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.parallax-section::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: url('images/bg.jpg') center / cover no-repeat;
}

回避策2：JavaScript 実装に切り替える

最も確実なのは、前述の transform + requestAnimationFrame による JavaScript 実装です。iOSを含む全デバイスで安定して動くため、モバイル比率が高いサイトではこちらを推奨します。

パララックスを手軽に実装できるJavaScriptライブラリ比較

ゼロから書かずに済ませたいなら、専用ライブラリが便利です。代表的な4つを、特徴・容量・向き不向きで比較しました。

ライブラリ	特徴	容量の目安	向いている用途
Rellax.js	data属性で速度指定するだけ。超軽量・依存なし	約7KB	手軽な背景パララックス
simpleParallax.js	画像に自然な視差を付けるのに特化	約10KB	写真ギャラリー・LP
AOS	スクロールで要素をフェード／スライド表示	約14KB	要素の登場アニメ全般
locomotive-scroll	スムーススクロール＋高度な視差。表現力が高い	約40KB＋	リッチな制作系サイト

シンプルな背景パララックスなら Rellax.js、作品性の高いサイトを作るなら locomotive-scroll が定番です。ただしライブラリは容量とパフォーマンスのトレードオフになるため、用途に対して過剰にならないものを選びましょう。

<!-- Rellax.js の最小サンプル -->
<div class="rellax" data-rellax-speed="-4"></div>

<script src="https://cdn.jsdelivr.net/npm/rellax/rellax.min.js"></script>
<script>
  new Rellax('.rellax'); // data-rellax-speed の値で速度を調整
</script>

パララックス実装でよくある失敗と対処法

よくある失敗	原因	対処法
スマホで背景が動かない	iOS Safari が background-attachment: fixed を無効化	擬似要素 fixed か JavaScript 実装に切替
スクロールがカクつく	top/left で位置を動かしてリフローが発生	transform: translate3d と will-change を使う
文字が背景に埋もれて読めない	背景と文字色のコントラスト不足	text-shadow やオーバーレイ（半透明の黒）を重ねる
背景の端に隙間ができる	動く分の高さを確保していない	背景要素に height:120〜130% など余白を持たせる
ページが重い・発熱する	scroll イベントで毎回重い処理	requestAnimationFrame で間引き、画像を軽量化

特に多いのが1つ目と2つ目です。「iOSで動かない」「カクつく」はパララックスの二大トラブルなので、公開前に実機とデベロッパーツールで必ず確認しましょう。

主要ブラウザ・デバイスの対応状況

手法	PC Chrome/Edge	PC Safari	iOS Safari	Android Chrome
background-attachment: fixed	◎	◎	×（無効）	△（一部不安定）
transform + JavaScript	◎	◎	◎	◎
CSS perspective 3D	◎	◎	○	○
position: sticky	◎	◎	◎	◎

モバイルまで含めて安定させたいなら、JavaScript実装か position: sticky が最も安全です。CSSの fixed 背景は「PC向けの装飾」と割り切るのが現実的です。

まとめ｜パララックス効果は仕組みを理解すれば初心者でも作れる

パララックス効果は、background-attachment: fixed の1行から始められる手軽なテクニックでありながら、JavaScript や3D transform を組み合わせれば表現の幅が大きく広がります。この記事の要点を振り返りましょう。

CSSだけなら background-attachment: fixed が最短。ただしiOS Safariで無効
全デバイス対応なら transform + requestAnimationFrame のJavaScript実装が安定
立体感を出すなら perspective + translateZ の3D手法が軽量で効果的
パフォーマンスは will-change・イベント間引き・画像軽量化で最適化する
prefers-reduced-motion で「動きを減らす」設定を尊重するのがa11yの基本

パララックスは「速度差＝視差」がすべて。
まずはCSS1行から試し、慣れたらJavaScriptで滑らかさとモバイル対応を高めていこう。

手を動かして仕組みを体で覚えるのが上達の近道です。まずは1つ、あなたのサイトにパララックスセクションを追加してみましょう。

よくある質問（FAQ）

Q1. パララックス効果とは何ですか？

A. パララックス（Parallax）は「視差」を意味し、視点の位置によって見え方が変わる現象を指します。Webデザインでは、スクロール時にコンテンツは通常の速さで流れる一方、背景画像はゆっくり動くことで生まれる「ズレ」により、奥行きや没入感を演出します。企業のLPやポートフォリオサイト、プロモーションサイトなどでよく使われます。

Q2. CSSだけでパララックスを実装できますか？

A. できます。最もシンプルな方法は、背景を持つ要素にbackground-attachment: fixed;を指定することです。このプロパティを指定すると背景画像がビューポート（画面）に対して固定され、コンテンツだけがスクロールするためパララックス効果が生まれます。ポイントはこの1行だけで、JavaScriptは不要です。

Q3. background-attachmentのfixedとscrollの違いは何ですか？

A. デフォルトのscrollは背景がコンテンツと一緒にスクロールし、通常の背景画像に使われます。fixedは背景がビューポートに固定されるためパララックス効果に用います。ほかにlocalという値もあり、これはスクロール可能なボックス内で背景が要素のスクロールに追従する用途で使われます。

Q4. background-attachment: fixed の注意点はありますか？

A. iOSのSafariでは動作しないという有名な問題があります。そのため、より幅広いブラウザやデバイスに対応したい場合や、スクロール速度を細かく調整したい場合は、JavaScriptを使った実装がおすすめです。JavaScriptによる方法では、より滑らかなパララックス表現やレスポンシブ対応も行いやすくなります。

Q5. position: sticky とパララックスはどう違いますか？

A. position: sticky は要素をスクロール中に一定位置で固定し、背後のコンテンツを流す手法です。厳密な「速度差による視差」ではありませんが、レイヤーが重なるモダンな奥行き表現ができ、JavaScript不要で軽量です。背景と前景を異なる速度で動かす古典的なパララックスは transform や background-attachment で実装します。用途に応じて使い分けましょう。

Q6. パララックスはページを重くしませんか？

A. 実装を誤ると重くなります。位置を top/left で動かすとリフローが発生して重くなるため、transform: translate3d と will-change を使ってGPU合成に載せるのが基本です。さらにscrollイベントを requestAnimationFrame で間引き、背景画像を圧縮すれば、スマホでも滑らかに動きます。

Q7. パララックスはSEOに悪影響がありますか？

A. 適切に実装すれば悪影響はありません。ただし、重い実装でページ速度（Core Web Vitals）が低下するとSEOにマイナスです。画像の軽量化、遅延読み込み、イベント間引きでパフォーマンスを保てば問題ありません。むしろ滞在時間の向上など、間接的にプラスに働くこともあります。

Q8. アクセシビリティで気をつけることはありますか？

A. prefers-reduced-motion（動きを減らす設定）を尊重することが最重要です。この設定を有効にしているユーザーには、パララックスやアニメーションを停止してください。過度な動きは乗り物酔い（前庭障害）を引き起こすことがあります。また、背景と文字のコントラストを十分に確保することも大切です。

Q9. おすすめのパララックスライブラリはどれですか？

A. 手軽な背景パララックスなら超軽量な Rellax.js、写真に自然な視差を付けるなら simpleParallax.js、要素の登場アニメも含めたいなら AOS、作品性の高いリッチなサイトなら locomotive-scroll が定番です。容量とパフォーマンスのトレードオフになるため、用途に対して過剰にならないものを選びましょう。

参考リンク（公式・一次情報）

CSS・Webデザイン実装の総まとめ

CSSの実装テクニックを「レイアウト・装飾・アニメーション・基礎・トラブル解決」の目的別に探せる総まとめページを用意しています。実装で迷ったときの索引としてどうぞ。

【CSS実装テクニック完全マップ】コピペで使えるWebデザイン実装ガイド総まとめ

AIスキルで、未来の自分をアップデート！

今なら完全無料でAIを学べる！

動画や実践で楽しく学べる：初心者でも安心のカリキュラム
スマホ・PCどちらでもOK：好きな時間に学習できる
料金は一切ナシ：0円でAIスキルが身につく

目的に合わせて選べる「AI副業」「AI転職」「AI活用」の3コースを用意。副収入・キャリアチェンジ・日常の生産性アップまで、あなたのゴールに合わせてAIを学べます。

会員登録はカンタン30秒で完了します。まずは公式LINEから、無料でAI学習をスタートしましょう！

公式LINEから学習をスタート

この記事を書いた人

WithCode 編集部

WithCode（ウィズコード）は「目指すなら稼げる人材」をビジョンに、累計400名以上のフリーランスを輩出してきた超実践型プログラミングスクールです。150社以上の実案件支援を特徴にWeb制作・Webデザインなどの役立つ情報を現場のノウハウに基づいて発信していきます。