【CSS】CSSのみでパララックスを実装する方法

背景画像を固定して、コンテンツだけスクロールさせるパララックスを
CSSのみで実装する方法をご紹介します。

パララックスデモ　-codepen–

下記のcodepenのコードをサクッとコピペしてもらえば
パララックスの仕組みは分かると思います。

See the Pen
poJNqmj by Gokan Soichiro (@sow_g)
on CodePen.

CSS解説

背景を固定してあるのが以下のclassです。
このclass名 ” parallax-box ” を固定したいブロックに設定するだけです。

.parallax-box {
	background-attachment: fixed;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	height: 300px
}

全画面で固定したい場合は
height: 300px を
height: 100vh
にするといいと思います。

使用している画像はGoogle が提供している Earth View でダウンロードしてきたものです。
全て商用利用も可能だそうです。
すばらしい！

© GOKAN DESIGN STUDIO