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 tak-kun (@tak-kun) on CodePen.
【CSSの解説】background-attachment:fixedを使う
.parallax-bg {
background-attachment: fixed;
}ポイントは「background-attachment」というプロパティを使って、値を「fixed」に指定することです。
background-attachmentプロパティは、背景画像をスクロールした時に固定させるか、移動させるかを指定することができるプロパティです。値に「fixed」を指定すると背景画像がスクロール時に固定され、「scroll」を指定するとスクロールに伴って背景画像も移動します。対応ブラウザはモランブラウザに対応しており、IE9でも対応しています。