1. >
  2. >
  3. attachmentを使わずiPhoneでも使えるパララックスっぽい装飾【CSS】

attachmentを使わずiPhoneでも使えるパララックスっぽい装飾【CSS】

書籍のイメージ

パララックスっぽい装飾がしたい

おしゃれな装飾したいなぁと思ってbackground-attachment:fixedにたどり着いても
スマホとかiPhone(ios)で使えないパターンに陥いるよね。

で、調べてみたところ、attachment:fixed がsafari(iPhone)では効かないようでした。
他の方法だと、jsを使うとか、プラグインを使うような感じで書かれています。

あとは、1枚だけ背景固定してheightを100vhにするパターン。そうじゃないんだよね。
こっちは複数枚の画像と文字をおきたいんだ!!!
疑似クラスならどうにかなるって試してみたけど、iPhoneではどのサイトでもだめ。
js勉強するしかないかと思ったんだけど、どうにかならないかなとCSSだけでできないか試行錯誤してみた。

要は、safariで使えるCSSのみでやればいいんでしょってことで、ベンダープレフィックスがあるCSSで調整してみることにしました。

たどり着いた答えは、-webkit-sticky!
とりあえず、デモで確認してみてください。

iosでもパララックスっぽいDEMO

見出しとか入れたいところ
文章とか説明入れたところ

見出しとか入れたいところ
文章とか説明入れたところ

見出しとか入れたいところ
文章とか説明入れたところ

できてますよね!CSSだけでそれっぽくできるんです。
ここでは、position の stickyで代用しています。
stickyなら、safariのベンダープレフィックスがあるので、iPhoneでも適用できます!
ちょっとスムーズ感に欠けるけど、CSSだけでパララックスっぽくなりました。

safari対応のHTML

各箱に画像を背景で固定。動かす文字にstickyを設定するような感じです。
今回は、見出しとテキスト部分を同じ箱に入れていますが、分けるともっときれいに見えるかもしれません。
お試しあれ。

safari対応のCSS

スマホでの崩れ回避できるし、jquery使わなくてもいいからめっちゃ簡単!

▼一応ほかのサイトとかで紹介されているデモも作っといた。
これだと、PCではきれいに見れても、スマホでは画像が停止してしまうし、大きくなってしまいます。
スマホ向けではないので注意!

PCのみ!パララックスっぽいDEMO

見出しとか入れたいところ
文章とか説明入れたところ
見出しとか入れたいところ
文章とか説明入れたところ
見出しとか入れたいところ
文章とか説明入れたところ

PCのみ!パララックスっぽいHTML

PCのみ!パララックスっぽいCSS

やっぱり比べるとattachmentが使えたほうがきれいにみえますね。
それでもスマホで対応したいようであれば、ぜひ参考にしてみてください。

検索語を上に入力し、 Enter キーを押して検索します。キャンセルするには ESC を押してください。

トップに戻る