【簡単】パララックスをスマホ対応する方法【CSSのみ】

こんにちは、hgmです！

今回は、視差効果（パララックス）デザインをスマホでも確認できるようにする方法をお伝えします。

パララックスはCSSの background-attachment: fixed; を使用することで背景画像を固定して表示させることができますが、2021年5月現在一部のスマホやタブレットでは対応できていません。

今回は background-attachment: fixed; を使わずにpostion: fixed; を使用し作りました。

デモ

See the Pen xxqPRRM by Sara Higuma (@higuma) on CodePen.dark

div.main の中にセクションを用意し、section#sec2 にパララックスを設置しました。

他のセクションに色または画像を設定しますが、section#sec2 は background: 0; で消してください。

section#sec2に疑似要素（:before）を追加し、疑似要素に背景画像をセットしています。
縦幅を height: 100vh; にすることで、縦幅いっぱいに表示できます。
また position: fixed; を使用することで、疑似要素が固定になりパララックスと同じ動きにすることができます。
あとは重なりの順序を考慮し、div.mainに z-index: 1; を、section#sec2:before に z-index: -1; を設定しています。

まとめ

今回ご紹介した方法であれば、PC・スマホ等デバイス問わず使用できレスポンシブも簡単にできます。

background-attachment: fixed; を使用せずとも簡単にパララックスが反映できるので、ぜひお試しください！