ページをスクロールしても画像はスクロールしない枠を作成する

概要

ページをスクロールしても画像は固定されてスクロールしない表現をCSSを利用して実装します。背景に配置された画像を枠でマスクして表示する動作イメージになります。

書式

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

background-attachment: fixed;

実装例

コード

以下のHTML、CSSファイルを作成します。

fiximage-01.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
  <link rel="stylesheet" href="fiximage-01.css" />
</head>
<body>
  <h1>スクロールしない画像のデモ</h1>
  <div class="content_frame">コンテンツです。</div>
  <div class="content_frame">コンテンツです。</div>
  <div class="content_frame">コンテンツです。</div>
  <div class="content_frame">コンテンツです。</div>
  <div class="content_frame">コンテンツです。</div>
  <div class="content_frame">コンテンツです。</div>
  <div class="content_frame">コンテンツです。</div>
  <div class="pararax_frame"></div>
  <div class="content_frame">コンテンツです。</div>
  <div class="content_frame">コンテンツです。</div>
  <div class="content_frame">コンテンツです。</div>
  <div class="content_frame">コンテンツです。</div>
  <div class="content_frame">コンテンツです。</div>
  <div class="content_frame">コンテンツです。</div>
  <div class="content_frame">コンテンツです。</div>

</body>
</html>

fiximage-01.css

.content_frame {
  height:4rem;
}

.pararax_frame {
  height: 240px;
  background-attachment: fixed;
  background-size: cover;
  background-image: url("img-01.png");
}

イメージ

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

ページをスクロールしても画像はスクロールしない枠を作成する:画像1

解説

以下のコードが画像を固定して表示する枠のコードです。background-attachment: fixed; を指定してスクロールしない設定としています。背景の画像はbackground-imageプロパティで設定しています。

.pararax_frame {
  height: 240px;
  background-attachment: fixed;
  background-size: cover;
  background-image: url("img-01.png");
}

実行結果

上記のHTMLファイルをWebブラウザで表示します。下図のページが表示されます。
ページをスクロールしても画像はスクロールしない枠を作成する:画像2

ページを下にスクロールします。画像が表示されている枠がスクロールしますが、画像はスクロールせずに、画像が見えている範囲が変化します。背景に固定して配置された画像を枠の大きさで切り抜いて表示する動作になります。
ページをスクロールしても画像はスクロールしない枠を作成する:画像3

スクロールすると画像の上部が枠内に表示されます。