ページをスクロールしても画像はスクロールしない枠をCSSで作成するコードを紹介します。
概要
ページをスクロールしても画像は固定されてスクロールしない表現をCSSを利用して実装します。
背景に配置された画像を枠でマスクして表示する動作イメージになります。
書式
CSSの
background-attachment プロパティを
fixed に設定することで表現できます。
background-attachment: fixed;
実装例
コード
以下のHTML、CSSファイルを作成します。
<!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>
.content_frame {
height:4rem;
}
.pararax_frame {
height: 240px;
background-attachment: fixed;
background-size: cover;
background-image: url("img-01.png");
}
イメージ
表示する画像のimg-01.pngは以下を利用します。
解説
以下のコードが画像を固定して表示する枠のコードです。
background-attachment: fixed; を指定してスクロールしない設定としています。
背景の画像は
background-imageプロパティで設定しています。
.pararax_frame {
height: 240px;
background-attachment: fixed;
background-size: cover;
background-image: url("img-01.png");
}
実行結果
上記のHTMLファイルをWebブラウザで表示します。下図のページが表示されます。
ページを下にスクロールします。画像が表示されている枠がスクロールしますが、画像はスクロールせずに、画像が見えている範囲が変化します。
背景に固定して配置された画像を枠の大きさで切り抜いて表示する動作になります。
スクロールすると画像の上部が枠内に表示されます。
ページをスクロールしても画像はスクロールせずに画像が表示される範囲が変化する動作をCSSで実装できました。
著者
iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。
最終更新日: 2024-07-02
作成日: 2024-03-31
