CSSのみでパララックス効果をつける

パララックスとは、簡単に言うと「視差」という意味があり、Webデザインにおけるパララックスは画面をスクロールさせることで複数のコンテンツに奥行きや立体感といった視差効果をつけるデザイン手法になります。パララックスにはjQueryなどのプラグインもありますが、CSSだけでも簡単にパララックスのような表現を実装することができます。

パララックスの作り方

それでは、CSSのみで視差効果をつける方法を見ていきましょう。

html,body {
  height: 100%;
}
.parallax-box {
  height: 100%;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  box-sizing: border-box;
}
.parallax-image {
  background-image: url(画像のパス);
}

まず、パララックス効果をつけたい要素に対して高さを指定します。ここでは100％を指定していますが、数値を変えることで違った見え方になるのでお好みで設定してみてください。通常はスクロールすると背景画像も一緒に動いてしまいますが、「background-attachment: fixed;」を指定することで背景画像を固定させることができます。その他に「background-size: cover;」で画面いっぱいに画像を表示させたりしています。
これで、視差効果をつける準備が整いました。あとは表示させたい分だけ背景画像を指定してあげれば完成です。