Tweet

Pocket

固定表示した背景画像が、要素が通り過ぎると別の背景画像に切り替える方法です。
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;
}

サンプル

• 要素が通り過ぎたら背景を切り替えるデモページ