2021年5月

background-attachment:fixedが効かないブラウザ用パララックス

iOS (iPhoneやiPad) のブラウザ「Safari」で、背景画像を固定してスクロールしないようにするCSSプロパティのbackground-attachment:fixedが効かない場合があります。

background-attachment:fixedを効果的に使用すると、複数の画像がスクロールによって入れ替わるパララックス (視差) などの面白い演出が可能になります。

今回は、background-attachment:fixedを使用せず、このパララックスを実現する方法を紹介します。