【CSSのみ】iOSでも複数セクションで背景パララックス実装

こんにちは、ワタナベです。

本日はiOSでも複数のセクションでパララックス背景を実装する方法の備忘録です。

PCでは「background-attachment: fixed」で非常に簡単に実装できるのですが、こちらのコードはレンダリングコストが高いらしくiOSでは現在（2024年10月）非対応となっています。

スマホでパララックスを再現させるには、「position: fixed」と「clip-path: inset(0);」を使用して再現します。
以下サンプルになります。

SAMPLE

背景画像を（.bgImage-clip）「position: fixed」で固定し、背景画像を囲っている要素（.bgImage-fixed）に「clip-path: inset(0);」を指定して切り抜き、パララックスを再現させています。

こちらiOSで見てもしっかりパララックスされています(*^^*)
こんなやり方があったのか！と目から鱗です。

▼THANKS！

それではまた次回。

ご閲覧ありがとうございました♪