JavaScriptでマウススクロールイベントを使用して背景画像を変更する方法

ウェブページの背景画像がスクロールに応じて変わると、視覚的にインパクトのあるエフェクトが生まれます。ユーザーがページをスクロールするたびに異なる背景画像が表示されるこの技術は、特にシングルページのウェブサイトやポートフォリオサイトで魅力的に見せるために効果的です。この記事では、この効果をJavaScriptとCSSを使ってどのように実装するかを詳細に説明します。

See the Pen Untitled by techcode sample (@techcode-sample) on CodePen.

1. 背景画像変更の基本的なアイデア

背景画像をスクロールに応じて変更するというのは、ウェブサイトの背景画像がユーザーがページをスクロールする際に段階的に変化するというものです。例えば、ある一定のスクロール量に達したときに、背景画像を次の画像に切り替えることができます。

2. 必要なHTML構造

まず、基本的なHTML構造を作成します。ここでは、コンテンツがいくつかのセクションに分かれたシンプルなページを作成します。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Scroll to Change Background</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="section" id="section1">
    <h1>Section 1</h1>
    <p>This is the first section of content.</p>
  </div>
  <div class="section" id="section2">
    <h1>Section 2</h1>
    <p>This is the second section of content.</p>
  </div>
  <div class="section" id="section3">
    <h1>Section 3</h1>
    <p>This is the third section of content.</p>
  </div>

  <script src="script.js"></script>
</body>
</html>

解説:

<div class="section" id="section1"> などの要素でページを複数のセクションに分けています。これにより、各セクションで異なる背景画像を設定することができます。

3. CSSスタイルの設定

次に、各セクションに背景画像を設定するためのCSSを書きます。セクションごとに異なる背景画像を設定することが可能です。

/* styles.css */
body, html {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: Arial, sans-serif;
}

.section {
  height: 100vh; /* Full viewport height */
  background-size: cover;
  background-position: center;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

#section1 {
  background-image: url('image1.jpg');
}

#section2 {
  background-image: url('image2.jpg');
}

#section3 {
  background-image: url('image3.jpg');
}

解説:

height: 100vh; はセクションがブラウザのビューポート全体の高さを占めるように設定します。
background-size: cover; で、背景画像がセクション全体をカバーするように拡大縮小されます。
各セクションには異なる背景画像が設定され、スクロールにより次のセクションが表示されるとその背景画像が表示されます。

4. JavaScriptでスクロールイベントを処理する

次に、JavaScriptを使って、ユーザーがページをスクロールしたときに背景画像を変更するロジックを実装します。今回は、ページのスクロール位置に応じて背景画像を切り替える簡単な例を紹介します。

// script.js
window.addEventListener('scroll', () => {
  const scrollY = window.scrollY; // 現在のスクロール位置
  const section1 = document.getElementById('section1');
  const section2 = document.getElementById('section2');
  const section3 = document.getElementById('section3');

  if (scrollY < window.innerHeight) {
    document.body.style.backgroundImage = 'url("image1.jpg")';
  } else if (scrollY >= window.innerHeight && scrollY < window.innerHeight * 2) {
    document.body.style.backgroundImage = 'url("image2.jpg")';
  } else {
    document.body.style.backgroundImage = 'url("image3.jpg")';
  }
});

解説:

window.addEventListener('scroll', ...) でスクロールイベントをリスンしています。
scrollY はページの垂直スクロール量を取得するプロパティです。
各セクションの高さに基づいて、document.body.style.backgroundImage を変更し、スクロール位置に応じて背景画像を切り替えます。

5. より高度な背景変更の実装

上記の基本的な実装に加えて、より滑らかで視覚的に魅力的なエフェクトを追加することも可能です。例えば、スクロールの速度や方向に基づいて背景画像がフェードイン・フェードアウトするようにしたり、パララックスエフェクトを加えたりすることができます。

5.1. 背景画像のフェードイン・フェードアウト

背景画像が急に切り替わるのではなく、フェード効果を使って滑らかに変更する方法を以下に示します。

/* styles.css */
body {
  transition: background-image 0.5s ease-in-out;
}

解説:

CSSの transition プロパティを使うことで、背景画像が変わる際に0.5秒のフェード効果が適用されます。この効果により、よりスムーズなビジュアルエクスペリエンスを提供できます。

5.2. パララックスエフェクトの追加

さらに、パララックス効果を追加することで、スクロールに応じて背景画像がゆっくり動く視差効果を実現することができます。

// script.js
window.addEventListener('scroll', () => {
  const scrollY = window.scrollY;
  document.body.style.backgroundPositionY = `${scrollY * 0.5}px`;
});

解説:

backgroundPositionY プロパティを使用して、背景画像のY軸位置をスクロール量に応じて変化させます。これにより、スクロールに対して画像がゆっくりと移動するようなパララックスエフェクトが生まれます。

6. ページのパフォーマンス最適化

スクロールイベントを使用する際には、パフォーマンスの最適化も重要です。スクロール中に大量の処理が発生すると、ページがカクつく原因になります。これを避けるために、requestAnimationFrame や throttle 関数を使って処理の頻度を制御することが推奨されます。

6.1. requestAnimationFrameの使用

let ticking = false;

window.addEventListener('scroll', () => {
  if (!ticking) {
    window.requestAnimationFrame(() => {
      const scrollY = window.scrollY;

      if (scrollY < window.innerHeight) {
        document.body.style.backgroundImage = 'url("image1.jpg")';
      } else if (scrollY >= window.innerHeight && scrollY < window.innerHeight * 2) {
        document.body.style.backgroundImage = 'url("image2.jpg")';
      } else {
        document.body.style.backgroundImage = 'url("image3.jpg")';
      }

      ticking = false;
    });

    ticking = true;
  }
});

解説:

requestAnimationFrame を使用して、ブラウザの再描画タイミングに合わせて処理を実行することで、パフォーマンスを最適化します。

7. 結論

今回紹介した方法を使うことで、JavaScriptとCSSを使ってスクロールに応じて背景画像を変更するダイナミックなウェブページを作成することができます。この技術を使用することで、ユーザーに対して視覚的にインパクトのあるエクスペリエンスを提供でき、特にシングルページアプリケーションやポートフォリオサイトにおいて効果的です。