はじめに
実装したいのはこんなパララックスです。
各セクション間に背景画像が見えていて、セクションごとに異なる画像に切り替わります。
これを2通りの方法で実装してみます。
-
background-attachment: fixedで実装 -
position: fixed+clip-pathで実装
先に書いておくと、background-attachment: fixed を使う方法はiOS Safariでうまく動かなかった（2024年9月時点）ため、実際のプロダクトでは後者の方法で実装しました。
必要に応じて前者は読み飛ばしてください。
1. background-attachment: fixed で実装
特筆ポイントは、background-imageを指定している要素にbackground-attachment: fixed;を指定している点です。
背景画像を固定してくれます。
しかしiOS Safariではbackground-attachment: fixedがうまく動作しません。（2024年9月時点）
レンダリングコストが非常に高いため、Appleはモバイルデバイスではこれを無効にしている、、ということのようです。
2. position: fixed + clip-path で実装
iOSでも動いてくれないと困るので、別の方法で再現します。
まず、前述のコードからHTMLの構造を少し変えています。
背景領域を切り抜くため、.bg-image-clipを追加して背景画像の要素をラップしました。
背景画像の要素は、position: fixed;を指定して固定します。
ラップしている要素にclip-path: inset(0);を指定し切り抜きます。
<div class="bg-image-clip">
<div class="bg-image-fixed"></div>
</div>
.bg-image-clip {
position: absolute;
top: -200px;
left: 0;
width: 100%;
height: 100%;
min-height: 230px;
clip-path: inset(0); /* 切り抜き */
z-index: -1;
}
.bg-image-fixed {
position: fixed; /* 背景を固定 */
top: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
}
background-attachment: fixedを使わずに、iOSにも対応できる代替手段で実装できました。
まとめ
ちょっと変わったパララックスデザインでしたが、思ったよりシンプルなコードで実装できました。
CSSだけで実現できるのは嬉しいですね。
Discussion