CSS
【簡単】パララックスをスマホ対応する方法【CSSのみ】
2021年05月31日 8:00
こんにちは、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; を使用せずとも簡単にパララックスが反映できるので、ぜひお試しください！
関連記事
この記事を書いた人
hgm
農業高校出身フロントエンドエンジニアの社員hgmです。 猫センサー搭載済みの愛猫家。 広い視野を持って日々邁進していきます！
