スクロールに応じて背景色が変わるウェブページの作成方法

ウェブサイトを作成する際、スクロールに合わせて背景色を変える効果を加えると、ユーザー体験を向上させることができます。
今回は、HTML、CSS、JavaScriptを使って、スクロールに応じて背景色と文字色を変更する簡単な方法を紹介します。

初心者にもわかりやすく説明しますので、ぜひ挑戦してみてください。

See the Pen Untitled by kasasagi_kmnmc (@kasasagi_kmnmc) on CodePen.

↑下にスクロールしてみて下さい。

HTMLファイル (index.html)
CSSファイル (styles.css)
JavaScriptファイル (script.js)
まとめ

HTMLファイル (index.html)

以下のコードをindex.htmlという名前のファイルに保存してください。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Background Color Change on Scroll</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <section id="section1">Section 1</section>
    <section id="section2">Section 2</section>
    <section id="section3">Section 3</section>
    <script src="script.js"></script>
</body>
</html>

ポイント

<section>タグを使用して、スクロールごとに背景色が変わる異なるセクションを作成しています。
<link rel="stylesheet" href="styles.css">で外部のCSSファイルをリンクし、<script src="script.js"></script>で外部のJavaScriptファイルをリンクしています。

CSSファイル (styles.css)

以下のコードをstyles.cssという名前のファイルに保存してください。

body {
    margin: 0;
    transition: background-color 0.5s, color 0.5s; /* 背景色と文字色の変更にスムーズなトランジションを追加 */
}

section {
    padding: 50px;
    height: 750px; /* 各セクションの高さを設定 */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 2em;
}

ポイント

bodyに対して、背景色と文字色の変更にスムーズなトランジション（0.5秒）を追加しています。
各セクションの高さを750pxに設定し、中央揃えで表示しています。

JavaScriptファイル (script.js)

以下のコードをscript.jsという名前のファイルに保存してください。

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;

    // 背景色と文字色の変更
    if (scrollY >= section1 && scrollY < section2) {
        document.body.style.backgroundColor = 'white';
        document.body.style.color = 'black'; // 背景が白のときは文字色を黒に変更
    } else if (scrollY >= section2 && scrollY < section3) {
        document.body.style.backgroundColor = 'black';
        document.body.style.color = 'white'; // 背景が黒のときは文字色を白に変更
    } else if (scrollY >= section3) {
        document.body.style.backgroundColor = 'white';
        document.body.style.color = 'black'; // 背景が白のときは文字色を黒に変更
    }
});

ポイント

window.addEventListener('scroll', function() {...});でスクロールイベントをリスンし、スクロール位置に基づいてbodyの背景色と文字色を変更しています。
offsetTopを使って、各セクションの位置を取得し、その位置に基づいて色を変更しています。

まとめ

このコードを使うことで、スクロール位置に応じて背景色と文字色を変える効果を簡単に実装できます。これにより、ユーザーがページをスクロールする際に、視覚的に異なるセクションを強調することができます。
初めての方でも、このサンプルコードを参考にして、自分のウェブサイトにカスタマイズしてみてください。
色の変更はユーザー体験を向上させるだけでなく、ページに動きや興味を加える素敵な方法です。