【完全解説】パララックス背景 × 中身だけ切り替わるスクロール演出の作り方

Webサイトを訪れたユーザーに印象的な体験を与えるには、視覚的な演出が重要です。
この記事では、背景は固定（パララックス）で、
中央のボックスだけがスクロールに応じて切り替わるという仕組みをHTMLとCSS、
JavaScriptでシンプルに実装する方法をご紹介します。

こんな動きを作れます

• 背景画像はパララックス風に固定表示
• 中央にあるコンテンツボックスは常に画面中央に表示
• スクロール位置に応じて、ボックス内の中身（テキスト）が切り替わる
• 最後にフッターが表示されると、中央ボックスがフェードアウトして消える

HTML＋CSS＋JavaScript 実装コード

以下が全体のコードです。

HTML構造

<div>ヘッダー部分</div>

<div class="fixed-bg"></div>

<div class="content-box" id="content-box">
  <h1 id="content-title">セクション 1</h1>
  <p id="content-text">最初のコンテンツです。</p>
</div>

<!-- 各セクションのスクロールトリガー -->
<div class="section-trigger" data-title="セクション 1" data-text="最初のコンテンツです。"></div>
<div class="section-trigger" data-title="セクション 2" data-text="中身が切り替わりました！"></div>
<div class="section-trigger" data-title="セクション 3" data-text="さらに違う内容です。"></div>

<!-- 最後にフッター -->
<div class="section-trigger" id="footer-trigger" data-title="" data-text=""></div>
<footer>
  <p>📌 ここはフッター部分です。背景はそのまま、枠は消える</p>
</footer>

CSSデザイン

body, html {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  overflow-x: hidden;
}

.fixed-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: url('https://picsum.photos/id/1018/1600/900') center/cover no-repeat;
  z-index: -1;
}

.content-box {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(255, 255, 255, 0.95);
  padding: 40px;
  border-radius: 16px;
  max-width: 700px;
  width: 80%;
  text-align: center;
  box-shadow: 0 8px 30px rgba(0,0,0,0.3);
  transition: opacity 0.5s ease;
  z-index: 1;
}

.content-box.hide {
  opacity: 0;
  pointer-events: none;
}

.section-trigger {
  height: 100vh;
}

footer {
  background: #222;
  color: #fff;
  padding: 80px 20px;
  text-align: center;
}

JavaScriptによる動きの制御

const contentBox = document.getElementById('content-box');
const titleEl = document.getElementById('content-title');
const textEl = document.getElementById('content-text');
const triggers = document.querySelectorAll('.section-trigger');

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const title = entry.target.dataset.title;
      const text = entry.target.dataset.text;

      if (entry.target.id === "footer-trigger") {
        contentBox.classList.add('hide');
      } else {
        contentBox.classList.remove('hide');
        titleEl.textContent = title;
        textEl.textContent = text;
      }
    }
  });
}, { threshold: 0.6 });

triggers.forEach(trigger => observer.observe(trigger));

解説ポイント

処理	内容
IntersectionObserver	各 .section-trigger の表示位置を監視します
entry.isIntersecting	セクションが画面に入ったら発火
data-title / data-text	セクションごとの中身を自由に指定できます
footer-trigger	最後のセクションで中央ボックスを非表示に

活用アイデア

この構成は、以下のような用途に最適です：

• スクロールで情報を順に伝えるランディングページ
• 製品の3ステップ紹介
• ストーリーテリング型ページ（マンガ・体験談など）

まとめ

スクロールによって中央の中身だけが切り替わる演出は、視覚的にとても印象的で、
訪問者の注目を集めやすいです。
しかも、このような効果は少ないコードで再現可能です。

デザインや内容をカスタマイズするだけで、様々な業種・目的に応用できます。
ぜひ自社サイトやキャンペーンページに取り入れてみてください！

Favorite