スクロールすると背景色が変化するCSSとJavascript

ウェブサイトでスクロールするたびに、背景色が変わるデザインを見かけたことありますか？

この記事で、必要なCSSとJavascriptを紹介します！

スクロールで定位置にくると背景色が変わる

Javascript
CSS
HTML
使用例
注意事項

Javascript

const animatedText = document.querySelector('.animated-text');

window.addEventListener('scroll', () => {
    const scrolled = window.scrollY;

    if (scrolled > 100) { // You can adjust this value to change when the effect is triggered
        animatedText.classList.add('active');
    } else {
        animatedText.classList.remove('active');
    }
});

scroll イベントを検出して、スクロールの位置に応じてテキストの背景アニメーションをトリガーにする。100pxを超えてスクロールすると、.active クラスを .animated-text 要素に追加して背景のアニメーションを開始。100px以下に戻ると、.active クラスを削除してアニメーションをリセットする。

CSS

.content {
    display: flex;
    align-items: center;
    justify-content: center;
}

.animated-text {
    font-size: 2rem;
    background-image: -webkit-linear-gradient(left, transparent 50%, #ffffbc 50%);
    background-image: -moz-linear-gradient(left, transparent 50%, #ffffbc 50%);
    background-image: -ms-linear-gradient(left, transparent 50%, #ffffbc 50%);
    background-image: -o-linear-gradient(left, transparent 50%, #ffffbc 50%);
    background-image: linear-gradient(left, transparent 50%, #ffffbc 50%);
    background-size: 200% 100%;
    background-position: 0 0.4em;  /* 左から開始 */
    transition: background-position 5s;
    padding: 0.5rem 1rem;
}

.active {
    background-position: -100% 0.4em;  /* 右に移動 */
}

.animated-text は、テキストのデフォルトの背景位置や色を設定するためのスタイルを提供。左から始まり、50% で透明から #ffffbc へのグラデーションが設定されてる。

.active クラスは、テキストの背景位置を変更してアニメーション効果を適用するためのスタイルを提供。

transition プロパティを使用して、背景位置の変更が滑らかにアニメーションされるようにする。

HTML

<div class="content">
    <p class="animated-text">Scroll down to see the effect!</p>
</div>

div と p タグを使用して、アニメーションを適用するテキストのコンテナと内容を提供。

使用例

ストーリーテリング

あるストーリーをページを通して語りたい時、スクロールで色が変わることで感情の移行やシーンの変更を伝えることができる。

情報を視覚的に表現

ユーザーが情報を探索する際のガイドとして、色の変化を利用することで、特定のデータセクションを強調することができる。

エンゲージメント向上

ただの静的なページよりも、スクロールで色が変わるページの方がユーザーの興味や好奇心を引きつける可能性が高まる。

注意事項

パフォーマンス

背景色の変化はブラウザのリソースを使用する。特に大きなページや多数のエフェクトを併用する場合は、パフォーマンスの低下に注意が必要。

アクセシビリティ

色の変化は視覚的に魅力的だが、視覚障害のあるユーザーや色盲のユーザーには注意が必要。適切な色のコントラストを保ち、情報伝達に色だけに依存しないようにすることが大切。

デザインの一貫性

ウェブサイト全体のデザインやブランドの色と合わせて、背景色の変化を計画的に選択することが重要。

スクロールと背景色の変化で、伝えたい情報がより伝わりやすくなります。ただし使い過ぎには注意です。