さすらいのWeb制作家、MAKOCHINがつづるブログサイト。
Web制作に関する知識を備忘録的に書いているだけのサイトです。
ほとんど自分で見るためだけに書いているような内容なので読みやすくはなっていませんが、Web制作のお役に立てれば幸いです。
ご興味のある方はどうぞ。

【CSS】要素が通り過ぎたら背景を切り替える

Pocket
LINEで送る

固定表示した背景画像が、要素が通り過ぎると別の背景画像に切り替える方法です。
JSなどを使用せずCSSの記述だけで実現出来ます。

HTML

背景画像を設定した要素とスクロールされる要素とを交互に記述します。

<div id="scene01Bg">背景画像1</div>
<div id="scene01">要素1</div>
<div id="scene02Bg">背景画像2</div>
<div id="scene02">要素2</div>
<div id="scene03Bg">背景画像3</div>

CSS

背景画像を設定した要素に高さを指定し、「background-attachment: fixed;」を指定して背景画像を固定します。

#scene01Bg {
	width:100%;
	height:1080px;
	background:url(../img/bg01.jpg) no-repeat top center;
	background-attachment:fixed;
	z-index:1;
	text-indent:-100%;
}

#scene01 {
	width:100%;
	height:600px;
	background-color:#F9B0B1;
	z-index:2;
	text-align:center;
}

#scene02Bg {
	width:100%;
	height:1080px;
	background:url(../img/bg02.jpg) no-repeat top center;
	background-attachment:fixed;
	z-index:1;
	text-indent:-100%;
}

#scene02 {
	width:100%;
	height:600px;
	background-color:#C9D0F8;
	z-index:2;
	text-align:center;
}

#scene03Bg {
	width:100%;
	height:1080px;
	background:url(../img/bg03.jpg) no-repeat top center;
	background-attachment:fixed;
	z-index:1;
	text-indent:-100%;
}

#scene01 p,
#scene02 p {
	margin:0;
	padding:260px 0 0 0;
	font-size:80px;
}

サンプル

カテゴリー:HP制作, css

コメントを残す

コメント内容