コーディング

【備忘録】「background-attachment: fixed」をスマホでは無効にする方法

  • このエントリーをはてなブックマークに追加
【備忘録】「background-attachment: fixed」をスマホでは無効にする方法

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

今回は、「background-attachment: fixed」を使って背景を固定した時に、スマホでは固定を無効にする方法の備忘録です。

「background-attachment: fixed」は背景を固定してくれて簡単にパララックスなコーディングをすることができます。

しかしこの「background-attachment: fixed」は残念なことにiOSだとバグります。

疑似要素を使用した対応方法もありますが、ページにパララックスしたい箇所が複数ある場合はスクロールした際にz-indexの切り替えなどの設定をしなくてはならないので非常にやっかいです。

したがって、スマホでは「background-attachment: fixed」を無効にするのが一番簡単な実装方法となります。

 

以下が自分が色々試して落ち着いた実装方法です。

 

SAMPLE

See the Pen
Untitled
by Akiho (@wcaotdaenpaebne)
on CodePen.

固定背景にする要素にcssで直接fixedの設定をするのではなくて、「bg-fixed」というクラスを設定しJSでPC表示の時に「background-attachment: fixed」を付与させます。

これでPCで表示した時だけ背景が固定されます。

個人的にこれが一番楽だったので良ければご参考ください!

 

 

それでは皆様良いクリスマス、年末をお過ごしください。

今年もお世話になりました。来年もよろしくお願い致しますm(__)m

  • このエントリーをはてなブックマークに追加

【Webデザイナー募集!】D-Gripで一緒に働きませんか?

ただいま株式会社D-Gripシステムでは、制作部として一緒に働いてくれるWebデザイナーさんを募集しています。

実務経験がある方はもちろん、専門学校や独学で勉強された未経験の方でも歓迎です!
800サイト以上の運営実績のある会社で、プロのWEBデザイナーへの道を着実に歩んでいきませんか?

お問い合わせはコチラから↓
採用サイトへ

お電話はコチラから↓
TEL:03-5363-2191

採用サイトへ