兵庫県三田市でホームページ製作をしているゴリラドットです。

本当になんとお詫びしていいのか…。というのと自らの無知を恥じたい。

 

よくcssだけで背景画像のパララックス実装！っていう記事がありますよね。ぼくも普段からそれでパララックス出来るんだなーと思ってたんですが、実際にやってみるとバグに…。

アイフォン、iOSは「background-attachment: fixed;」に対応してないんですよね。

 

アイフォンってもう多くの人が使ってて、そこで未対応の実装テクニックなんて使えないと思うのが普通だと思います。

てことでパララックスをcssのみで実装する際は「background-attachment: fixed;」じゃない方法で実装する必要があります。それかもうjqueryのパララックスライブラリを使ってもいいかもしれません。

とにかくぼくみたいに巷のcssのみでパララックス実装！に惑わされないようにしてほしい！という事でこの記事を。

 

他のcssパララックス実装方法

「background-attachment: fixed;」で背景画像がとどまったように見えて、そしてパララックス感があある実装ができるんですが、なんでそういう視覚効果があるのかわからない人も多いと思うのでサクッとそのおさらいから。

「background-attachment: fixed;」を設定した背景画像はディスプレイ全体に配置されます。フルスクリーンって奴です。「width100%;height:100%」です。

そしてその背景を設定している要素がスクロール時にその上をなぞっていくように動くのでまるで背景だけ止まって見える（周りとはスクロール時に移動してる距離が違うように見える）というコト。

 

つまり「background-attachment: fixed;」は画面いっぱいに広げた要素に「position:fixed」を設定して、後ろに表示してるのと同じなんです。

んでその上を背景透明の要素が通過すれば全く同じ効果になります。

 

てことでcssのみでアイフォン対応の背景パララックスを作るときは、疑似要素（beforeとかafterとかのやつです）に対して背景にしたい画像を設定して「position:fixed」んで幅と高さを100%にします。

このままだとこの疑似要素が一番前に出てきて他に何も表示されないんで「z-index:-1」を設定して他のコンテンツより後ろになるようにして完了。

後はその上を透明なエリアが通りすぎれば背景パララックスの出来上がり。

キモは「background-attachment: fixed;」を使うんじゃなくて「position:fixed」を使ってる所です。結局アイフォンは「background-attachment: fixed;」が使えないので他のプロパティで代用しちゃおう！ってコト。

 

position:fixedの親要素について

「position:fixed」を指定した要素の親ってどれなの？って疑問ですよね。

ぼくも今回このバグに出会うまではなあなあで済ませてたんですがきっちり調べてみる事に。

結果としては「position:fixed」を指定した要素の親はbodyになります。

ただこれってどの要素でも同じで、別に「position:fixed」を指定してなくても親要素は何もしなければ全部bodyになります。

また「position:fixed」を指定した要素の親要素など、その上位の要素に「position:static」以外と「z-index:auto」以外の値（例えばrelativeと1とか）を設定すればその要素でスタックコンテキストが生成されて、「position:fixed」の要素もそれ基準でのz-indexになります。

 

…つまりわかりづらいですが「position:fixed」を指定したからといって何か別の、特別な親要素にくっつくようになるわけじゃなくて、他の要素と全く同じというコト。

先祖のどこかでスタックコンテキストが生成されてたらそれ基準で重なるし、そうじゃないならほかのと同じでbodyを親にして重なるよ！というコトでした。

 

まとめ

今回はcssのみで背景パララックスは実装しちゃダメ！っという内容でお届けしました。

アイフォンに対応しなくていいなら別に問題ないですが、今現在アイフォンで動かないっていうのは致命的だと思います。てことで巷に出ているcssのみで背景パララックス実装！の記事はあんまり実用性ないよ…っていうのを知ってもらって、ぼくみたいなミスがなくなればいいなーと思います。

まだまだ勉強しないとなー。