CSSのみだけでWebページにパララックスのようなスクロールを表現できる「background-attachment:fixed」を使った方法について紹介します。

パララックス（Parallax）とは？

パララックス（Parallax）とは「視差効果」という意味です。

Webページにパララックスを取り入れるとスクロールした時に要素の動きをずらして、レイヤーの重なりに奥行きのある演出を表現することができます。

これによりページにストーリー性を表現したり、魅力的な表現を加えることができます。

パララックス自体は最近流行り出した表現方法ではなく、シングルページレイアウトデザインが流行り出す前から細々と人気があった表現方法で、現在もよく使われている表現方法の1つです。

CSSのみでパララックスのようなスクールを表現する

パララックスはJavaScriptを使って実装するやり方もありますが、CSSのみだけでパララックスを表現することも可能です。

今回作ったデモページでは4つの要素をdivタグで囲み、4つの要素にそれぞれ背景画像を設定します。

そして各要素に設定した背景画像が画面の高さいっぱいに表示されるように「height:100%」と「background-size: cover」を指定しています。

See the Pen 【CSS】background-attachmentでパララックスを表現する by ayukat (@ayukat) on CodePen.

【CSSの解説】background-attachment:fixedを使う

.parallax-bg {
  background-attachment: fixed;
}

ポイントは「background-attachment」というプロパティを使って値を「fixed」に指定することです。

background-attachmentプロパティは背景画像をスクロールした時に固定させるか、移動させるかを指定することができるプロパティです。

値に「fixed」を指定すると背景画像がスクロール時に固定され「scroll」を指定するとスクロールに伴って背景画像も移動します。

対応ブラウザは全てのモランブラウザに対応しております。

対応ブラウザ