Written by Kasumi

【簡単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

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

目次

関連記事

HTMLCSS プログラミング

flexbox(フレックスボックス)で横並びにした要素の線の重なりを無くす方法

2021.03.02
1755
HTMLCSS プログラミング

【簡単】CSSで文字のitalicが効かない。transformで傾きを付けよう

2022.04.10
422
HTMLCSS プログラミング

CSSで上付き・下付き注釈をつける書き方【コードペンデモ有り】

更新日:2020.04.21
671
HTMLCSS プログラミング

【簡単】スマホのぱんくずを一行にして、はみ出した分を横スクロールで見せる方法

2022.01.17
141