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