こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。
近年のWebデザインでは、背景に動きを取り入れることで、訪れたユーザーの記憶に残る体験を提供する手法が注目されています。
特に「夜から朝へ移り変わる背景演出」は、スクロールという自然な動作と連動させることで、ストーリー性のある表現を生み出せます。
この記事では、CSSとJavaScriptを組み合わせて「夜から朝」へ変化する背景アニメーションを実装する方法を紹介します。
スクロール連動の背景変化の仕組み
スクロールに応じて背景を変えるには、大きく分けて次の2つの方法があります。
- CSSのグラデーションを利用して背景色を変化させる
- JavaScriptでスクロール量を取得して動的に色を制御する
今回は、JavaScriptでスクロール位置を取得し、背景のグラデーションを動的に変化させる方法を使います。
実装コード例
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
「星が消えて太陽が昇る」デモ
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
ポイント解説
- 背景の色はRGBを補間することで滑らかに変化
- スクロールの進行度（0〜1）を利用して計算
- 夜から朝への移り変わりを物語的に演出可能
まとめ
スクロール操作に合わせて夜から朝に変化する背景は、シンプルながらサイトに強い印象を与える演出方法です。
ブランドサイトやキャンペーンページ、ポートフォリオなどに活用することで、他にはない没入感のある体験を提供できます。
ぜひ試してみてください。
satokotadesignキャンペーン実施中！
