スクロールするとセクションごとに背景画像が変化するページを作成する - CSS

スクロールするとセクションごとに背景画像が変化するページを作成します。

概要

ページをスクロールすると背景が固定して表示され、スクロールするとセクションごとに背景が変化する表現をCSSを利用して実装します。

書式

CSSの background-attachment プロパティを fixed に設定し複数の枠を設置することで表現できます。

background-attachment: fixed;

実装例

コード

fixchangeimage-01.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <link rel="stylesheet" href="fixchangeimage-01.css" />
</head>
<body>
  <h1>スクロールごとに画像が変化するデモ</h1>
  <div class="content_frame">コンテンツです。</div>
  <div class="content_frame">コンテンツです。</div>
  <div class="content_frame">コンテンツです。</div>
  <div class="pararax_frame1">緑豊かな森林</div>
  <div class="content_frame">コンテンツです。</div>
  <div class="content_frame">コンテンツです。</div>
  <div class="pararax_frame2">活気あふれる都市</div>
  <div class="content_frame">コンテンツです。</div>
  <div class="content_frame">コンテンツです。</div>
  <div class="pararax_frame3">美しい水辺</div>
  <div class="content_frame">コンテンツです。</div>
  <div class="content_frame">コンテンツです。</div>
  <div class="content_frame">コンテンツです。</div>
  <div class="pararax_frame4">先進的な技術力</div>
  <div class="content_frame">コンテンツです。</div>
  <div class="content_frame">コンテンツです。</div>
  <div class="pararax_frame5">宇宙をつなぐ交通の要衝</div>
  <div class="content_frame">コンテンツです。</div>
  <div class="content_frame">コンテンツです。</div>
  <div class="content_frame">コンテンツです。</div>

</body>
</html>

fixchangeimage-01.css

body {
  margin: 0 0 0 0;
  padding:0 0 0 0;
}

.content_frame {
  height: 4rem;
}

.pararax_frame1 {
  display: flex;
  font-size: 2.6rem;
  color: #FFFFFF;
  align-items: center;
  justify-content: center;

  height: 320px;
  background-attachment: fixed;
  background-size: cover;
  background-image: url("res/img-01.png");
}
.pararax_frame2 {
  display: flex;
  font-size: 2.6rem;
  color: #FFFFFF;
  align-items: center;
  justify-content: center;

  height: 320px;
  background-attachment: fixed;
  background-size: cover;
  background-image: url("res/img-02.png");
}
.pararax_frame3 {
  display: flex;
  font-size: 2.6rem;
  color: #FFFFFF;
  align-items: center;
  justify-content: center;

  height: 320px;
  background-attachment: fixed;
  background-size: cover;
  background-image: url("res/img-03.png");
}
.pararax_frame4 {
  display: flex;
  font-size: 2.6rem;
  color: #FFFFFF;
  align-items: center;
  justify-content: center;

  height: 320px;
  background-attachment: fixed;
  background-size: cover;
  background-image: url("res/img-04.png");
}
.pararax_frame5 {
  display: flex;
  font-size: 2.6rem;
  color: #FFFFFF;
  align-items: center;
  justify-content: center;

  height: 320px;
  background-attachment: fixed;
  background-size: cover;
  background-image: url("res/img-05.png");
}

イメージ

表示する画像のimg-01.png ～ img-05.pngは以下を利用します。

解説

以下のコードが画像を固定して表示する枠のコードです。前半部分のdisplay: flex;からjustify-content: center; は枠内のキャプション文字列の色やフォントサイズ、文字列を枠の中心に表示するためのスタイル設定になります。
後半のbackground-attachment: fixed;以降が枠の背景の画像の設定コードになります。background-attachmentの設定についてはこちらの記事も参照してください。
background-attachment: fixed; を指定してスクロールしない設定としています。背景の画像はbackground-imageプロパティで設定しています。

.pararax_frame1 {
  display: flex;
  font-size: 2.6rem;
  color: #FFFFFF;
  align-items: center;
  justify-content: center;

  height: 320px;
  background-attachment: fixed;
  background-size: cover;
  background-image: url("res/img-01.png");
}