パララックス背景を実装してiPhoneで見てみたら上手く動かなかったので、調べてみたところ、background-attachiment position:fixed;で背景を固定するやり方は、iOS端末では対応していないことがわかった。
そこで上記のCSSを使わずにパララックス背景にする方法を調べて、上手く実装できた。
パララックス背景とは
パララックス（視差効果）は、近年のWEBサイトでよく見る「背景が固定」されているものである。
ChatWorkのサイトでも実装されています。（2021年4月現在）
背景を固定することで、Webサイトに視覚の差異やスピード感・奥行きを演出できます。
おしゃれなサイトにはもってこいの表現技法です。
本題
まず、最初に一般的なbackground-attachiment:fixed;を使ったやり方の場合。
<div class="example">
<p>test</p>
</div>
.example {
background-image: url(./img/example.jpg);
background-attachment: fixed;
}
divに付与したexampleというクラス内で、example.jpgという背景画像を指定。
そこにbackground-attachment:fixed;を置くことで、背景画像を固定していますね。
そのため、スクロールすると背景は動かず周りの要素だけが動くので、不思議な感じになります。
しかし！！！！
これをSafariから見ると、なぜか背景はbackground-attachment:fixed;する前の状態のままなのです。。。
調べてみると、下記の記述があるサイトを見つけました。
iOS端末では「background-attachment: fixed」は効かないらしい
「background-attachment」は、スクロールする時に背景画像を固定したままにするか、
スクロールに合わせて移動させるかどうかを指定するためのれっきとしたcssプロパティです。
なので、このプロパティが間違った記述というわけではありません。
ですが、この「background-attachment」と一緒に「background-size: cover」というプロパティを一緒に記述すると、iPhone端末でバグが発生してしまいます。
これは公式でも確認されているiOSの不具合らしいです。
引用元：【パララックス・iOS】background-attachment: fixedがスマホで効かない！？原因と解決法を解説
結構簡単に対応できました
記述し直さないといけないのではないか、と倒れそうになりましたが
結構すぐに対応できました！
擬似要素のbeforeを使用していきます。
まず、先ほどのCSSの一個上に親divを追加。
<div class="example">
<div class="example-children">
<p>test</p>
</div>
</div>
追加した親divに擬似要素beforeを追加します。
.example::before {
content:"";
display:block;
position:fixed;
top:0;
left:0;
z-index:-1;
background-image: url(./img/example.jpg);
position: fixed;
}
背景をposition:fixedで背景画像固定して、
他の要素が上に重なっているみたいなイメージです。（多分）
なので他の要素より一個下に表示させるため、z-index:-1;をつけています。
また、他の要素も、白背景でもきちんとbackground-color: #fffってやらないと
背景画像がずっと見えてる状態になりますのでご注意を。。。
これは一部分だけパララックス背景にする場合に使えます。
複雑にパララックスが入り組んだサイトにする場合は、JQueryとか使う方が早いかもです。
↧