CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSを使ってスクロール時に背景画像を切り替える方法【サンプルコード付き】

CSSを使用すれば、JavaScriptに頼らなくても、ページをスクロールした際に背景画像を切り替える演出を実現できます。仕組みはシンプルで、複数のセクション（div要素）ごとに異なる背景画像を設定し、テキストをposition: fixedで画面に固定表示するだけです。スクロールに合わせて背景が次々と変化していき、パララックス風の印象的なデザインになります。

実装のポイント

  • 各div要素に対してbackground-imageで異なる画像URLを指定します。
  • background-size: cover; と background-position: center; を組み合わせることで、画像が各セクション全体をきれいに覆うように表示されます。
  • background-repeat: no-repeat; を指定して、画像の繰り返し表示を防止します。
  • 見出し（h1）はposition: fixed;で固定し、スクロール中も常に同じ位置に表示されるようにします。半透明の背景色（rgba）を指定すると、テキストの可読性が向上します。

コード例

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body, html {
   height: 100%;
   margin: 0;
   font-family: Arial, Helvetica, sans-serif;
}
* {
   box-sizing: border-box;
}
div {
   height: 40%;
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
}
.image1 { background-image: url("https://i.picsum.photos/id/827/400/400.jpg"); }
.image2 { background-image: url("https://i.picsum.photos/id/817/400/400.jpg"); }
.image3 { background-image: url("https://i.picsum.photos/id/811/400/400.jpg"); }
.image4 { background-image: url("https://i.picsum.photos/id/871/400/400.jpg"); }
.image5 { background-image: url("https://i.picsum.photos/id/471/400/400.jpg"); }
.image6 { background-image: url("https://i.picsum.photos/id/271/400/400.jpg"); }
h1 {
   position: fixed;
   top: 10%;
   left: 40%;
   background-color: rgba(0, 0, 0, 0.527);
   padding: 40px;
   color: white;
}
</style>
</head>
<body>
<div class="image1"></div>
<div class="image2"></div>
<div class="image3"></div>
<div class="image4"></div>
<div class="image5"></div>
<div class="image6"></div>
<h1>Fixed Text</h1>
</body>
</html>

出力結果

上記のコードを実行すると、下図のように画面上部に半透明の黒背景を持つ「Fixed Text」というテキストが固定表示されます。その状態でページを下へスクロールしていくと、背景画像がセクションごとに切り替わっていく様子を確認できます。

CSSを使ってスクロール時に背景画像を切り替える方法【サンプルコード付き】

  1. CSSでリストの箇条書き（ビュレット）の色だけを変更する方法

    CSSでリストの箇条書き（ビュレット）の色を変更したい場合、::before 疑似要素を使う方法が便利です。通常の color プロパティではテキストごと色が変わってしまうため、「マーカーだけ別の色にしたい」というケースでは、一度デフォルトの箇条書きを消してから独自のビュレットを生成するのが定番のテクニックです。実装のポイント仕組みはシンプルで、以下の2ステップで実現できます。list-style: none; … デフォルトの箇条書きマーカーを非表示にするli::before … 疑似要素でビュレット（Unicode の「\2022」＝ • ）を生成し、color プロパティで好みの色を指定

  2. CSSで作る！スクロール時に画面上部へ固定されるナビゲーションバーの実装方法

    CSSでスクロール時に固定されるナビゲーションバーを作成する方法Webサイトでページをスクロールしても画面上部に固定され続けるナビゲーションバーは、メニューへのアクセス性を保ち、ユーザビリティを大きく向上させる定番のUIテクニックです。CSSのpositionプロパティとJavaScriptを組み合わせることで、誰でも簡単に実装できます。この記事では、スクロールするとナビゲーションバーが画面上部にピタッと固定される仕組みを、実際のコード例とともにわかりやすく解説します。positionプロパティの基本構文CSSにおけるpositionプロパティの基本構文は次のとおりです。セレクタ {