スクロールに応じて背景色や背景画像に変わるサイトの作り方。

ウェブデザインに動きや変化を加えることで、訪問者の目を引くことができます。今回は、スクロールに応じて背景が変わるデザインを実装する方法をご紹介します。背景色が変わったり、背景に画像が表示されたりする動きを取り入れることで、より魅力的なウェブサイトを作成することができます。

この記事では、HTML、CSS、そしてJavaScriptを使って、以前も紹介したコードをカスタマイズしてスクロールに応じて背景色と背景画像が変わる効果を実装する方法を説明します。

サンプルはこちら

実装に必要な準備
HTMLで基本の構造を作成
CSSでスタイリングを加える
JavaScriptで背景の変更を実装
ポイントとなる箇所
サンプル
まとめ

実装に必要な準備

まず、動的に背景が変わるデザインを実現するために、以下の3つの要素を使います：

HTML: ページの構造を作成します。
CSS: スクロール時のスタイルを定義します。
JavaScript: スクロールイベントを利用して、背景を変更する動きを実装します。

HTMLで基本の構造を作成

まずは、スクロール時に背景が変わるセクションを作成します。以下のように、いくつかのセクションを用意します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>スクロールで背景が変わる</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <!-- 背景画像用のレイヤー -->
    <div class="background" id="bgImage"></div>

    <section id="section1">
        <span>↓↓ SCROLL ↓↓</span>
        Section 1（背景: 白）
    </section>
    <section id="section2">Section 2（背景: 黒）</section>
    <section id="section3">Section 3（背景: 画像）</section>
    <section id="section4">Section 4（背景: 白）</section>

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

CSSでスタイリングを加える

次に、背景色や画像が変わるように、CSSを使ってスタイリングを行います。以下のようにセクションごとのスタイルを設定し、背景を変化させる準備をします。

/* スクロール時に背景が変わるエフェクト */
body {
    margin: 0;
    font-family: Arial, sans-serif;
}

/* セクションのデザイン */
section {
    padding: 50px;
    height: 100vh; /* 各セクションの高さを画面全体に設定 */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 2em;
    color: #fff; /* 文字色 */
}

/* 背景用のレイヤー */
.background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* 背景として使うので手前に来ないように */
    transition: opacity 1s ease; /* 背景画像がフェードインするエフェクト */
}

JavaScriptで背景の変更を実装

スクロール時に背景が変わる動作を実現するために、JavaScriptを使ってスクロールイベントを監視し、スクロール位置に応じて背景色や画像を変更します。

window.addEventListener('scroll', function() {
    const scrollY = window.scrollY || document.documentElement.scrollTop;

    // 各セクションの位置を取得
    const section1 = document.getElementById('section1').offsetTop;
    const section2 = document.getElementById('section2').offsetTop;
    const section3 = document.getElementById('section3').offsetTop;
    const section4 = document.getElementById('section4').offsetTop;

    // 背景画像の要素を取得
    const bgImage = document.getElementById('bgImage');

    // 背景色と背景画像の変更
    if (scrollY >= section1 && scrollY < section2) {
        document.body.style.backgroundColor = 'white';
        document.body.style.color = 'black';
        bgImage.style.opacity = 0; // 背景画像を非表示
    } else if (scrollY >= section2 && scrollY < section3) {
        document.body.style.backgroundColor = 'black';
        document.body.style.color = 'white';
        bgImage.style.opacity = 0; // 背景画像を非表示
    } else if (scrollY >= section3 && scrollY < section4) {
        document.body.style.backgroundColor = 'white';
        document.body.style.color = 'black';
        bgImage.style.backgroundImage = 'url("https://example.com/background-image.jpg")'; // 画像を適用
        bgImage.style.opacity = 1; // 背景画像を表示
    } else if (scrollY >= section4) {
        document.body.style.backgroundColor = 'white';
        document.body.style.color = 'black';
        bgImage.style.opacity = 0; // 背景画像を非表示
    }
});