background-attachment fixedで背景画像を固定して、パララックスっぽい動きを実装する

背景画像を固定させて、CSSのみでパララックスっぽい動きを実装してみます。

サンプルコード

background-attachment:fixed;で各sectionの背景画像を固定するだけです。

HTML

<div class="contents">
	<div class="section section01"></div>
	<div class="section section02"></div>
	<div class="section section03"></div>
	<div class="section section04"></div>
</div>

CSS

.section {
	width: 100%;
	height: 800px;
	background: center center /cover no-repeat fixed;
	background-size: cover;
}
.section01 {
	background-image: url(./img01.jpg);
}
.section02 {
	background-image: url(./img02.jpg);
}
.section03 {
	background-image: url(./img03.jpg);
}
.section04 {
	background-image: url(./img04.jpg);
}

パララックスの動きのデモページ
background-attachmentの初期値はscrollなので、通常だとスクロールに合わせて移動していきますが、fixedにするとその場で固定になるのでこのような動きになります。