パララックスっぽい装飾がしたい
おしゃれな装飾したいなぁと思って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を設定するような感じです。
今回は、見出しとテキスト部分を同じ箱に入れていますが、分けるともっときれいに見えるかもしれません。
お試しあれ。
<div class="demo demo13"> <div class="box img-01"> <div class="bbx"> <div class="midasi">見出しとか入れたいところ</div> <div class="txt">文章とか説明入れたところ</div> </div> </div><div class="box img-02"> <div class="bbx"> <div class="midasi">見出しとか入れたいところ</div> <div class="txt">文章とか説明入れたところ</div> </div> </div> <div class="box img-03"> <div class="bbx"> <div class="midasi">見出しとか入れたいところ</div> <div class="txt">文章とか説明入れたところ</div> </div> </div> </div>
safari対応のCSS
.demo {
background: #eee;
position: relative;
}
.box {
background: center center / cover;
}
.box.img-01 {
background: url(http://office-kibunya.com/wp-content/uploads/2019/10/number.jpg);
height: 40rem;
}
.bbx {
height: 40rem;
}
.bbx .midasi{
background: #ffa50000;
position: sticky;
position: -webkit-sticky; /* Safari */
top: 7rem;
text-align: center;
display:block;
padding: 4rem 1rem 7rem 1rem;
line-height: 1rem;
text-shadow: #fff 2px 0px 0px, #fff -2px 0px 0px, #fff 0px -2px 0px, #fff 0px 2px 0px, #fff 2px 2px 0px, #fff -2px 2px 0px, #fff 2px -2px 0px, #fff -2px -2px 0px, #fff 1px 2px 0px, #fff -1px 2px 0px, #fff 1px -2px 0px, #fff -1px -2px 0px, #fff 2px 1px 0px, #fff -2px 1px 0px, #fff 2px -1px 0px, #fff -2px -1px 0px, #fff 1px 1px 0px, #fff -1px 1px 0px, #fff 1px -1px 0px, #fff -1px -1px 0px;
font-weight: bold;
}
.bbx .txt {
background: #ffffff;
position: sticky;
position: -webkit-sticky; /* Safari */
top: 16rem;
text-align: center;
display: block;
padding: 2rem 1rem 2rem 1rem;
line-height: 1rem;
min-height: auto;
}
.box.img-02 {
background-image: url(http://office-kibunya.com/wp-content/uploads/2019/10/pc.jpg);
height: 40rem;
}
.box.img-03 {
background-image: url(http://office-kibunya.com/wp-content/uploads/2019/10/gazou.jpg);
height: 40rem;
}
スマホでの崩れ回避できるし、jquery使わなくてもいいからめっちゃ簡単！
▼一応ほかのサイトとかで紹介されているデモも作っといた。
これだと、PCではきれいに見れても、スマホでは画像が停止してしまうし、大きくなってしまいます。
スマホ向けではないので注意！
PCのみ！パララックスっぽいDEMO
PCのみ！パララックスっぽいHTML
<div class="demo">
<div class="back img-01">見出しとか入れたいところ
</div>
<div class="txt">文章とか説明入れたれたいところ
</div>
<div class="back img-02">見出しとか入れたいところ
</div>
<div class="txt">文章とか説明入れたれたいところ
</div>
<div class="back img-03">見出しとか入れたいところ
</div>
<div class="txt">文章とか説明入れたれたいところ
</div>
</div>
PCのみ！パララックスっぽいCSS
.demo .back {
width: 100%;
min-height: 200px;
background-position: center top;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
text-align: center;
padding: 60px;
}
.demo .txt {
min-height: 200px;
width: 100%;
padding: 60px;
background-color: #fff;
text-align: center;
}
.demo .back.img-01 {
background-image: url(http://office-kibunya.com/wp-content/uploads/2019/10/number.jpg);
}
.demo .back.img-02 {
background-image: url(http://office-kibunya.com/wp-content/uploads/2019/10/pc.jpg);
}
.demo .back.img-03 {
background-image: url(http://office-kibunya.com/wp-content/uploads/2019/10/gazou.jpg);
}
やっぱり比べるとattachmentが使えたほうがきれいにみえますね。
それでもスマホで対応したいようであれば、ぜひ参考にしてみてください。