• HTMLCSS

【簡単CSS】複数の背景画像にパララックスを実装する方法【スマホ対応】

背景画像にパララックス（視差効果）を実装したい。

Javascriptを使わず、CSSだけで実装したい。

background-attachment: fixed;を使ってパララックスを実装したが、スマホ（iphone safari）で挙動がおかしくなる、スマホ対応させたい。

本記事ではCSSのposition: sticky;を使って、このような悩みを解決します。

実装サンプル

See the Pen
Untitled by Kohei (@kouk05)
on CodePen.0

パララックスの実装サンプルです。

スクロールしたらセクション事に背景画像が固定されてるのがわかります。

次章より詳細を説明します。

パララックスさせるCSSコード

.parallax {
  width: 100%;//背景画像の横幅
  height: 400px;//背景画像の高さ
  position: sticky;//背景画像を固定
  top: 0;
  left: 0;
  z-index: -1;//z軸位置指定
  background-image: url(https://kasumiblog.xsrv.jp/codepen/images/clouds.jpg);//背景画像を指定
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

上記がパララックスを実装するサンプルコードです。

position: sticky;を使う事で、プロパティを追加した要素の位置までスクロールしたら固定させる事ができます。

z-indexを追加し、重なり位置を-1にしましょう。

もしくはパララックスさせない要素より下になるよう調整します。

最後にbackgroundプロパティを指定して背景画像を指定すればパララックスの完成です。

まとめ

position: fixed;を使ってもパララックスを実装できるのですが、ページ内に複数のパララックスを実装する場合は不向きでした。

その点、position: sticky;は複数使えるので便利です。

古いブラウザではposition: sticky;が使えない可能性があります。

対応ブラウザは下記URLより確認可能です。

https://caniuse.com/?search=position%3A%20sticky%3B

以上で解説を終わります。