最近ではすっかり馴染みのあるパララックス効果ですが、今はとにかく簡単に実装する事ができるんですね。
とにかく簡単、これ大事です。作業効率アップ万歳！
…はしゃぎすぎましたね。
とにかく、これも便利ですので、ご紹介します。
【サンプル】
- パララックスって？
- ざっくり言うと背景画像を固定して表示させる表示方法です。
すっかりおなじみになった表示ですね。
【CSS】
background-image: url('画像URL');
background-repeat:no-repeat;
background-position: top center;
background-attachment: fixed;
background-size:cover;
CSSだけで実装できるなんて便利なものです。
「background-image」で画像を指定し、
「background-repeat:no-repeat;」で背景画像リピートを解除、
「background-position: top center;」で表示位置を画面中央・上に指定、
「background-attachment: fixed;」で画像をスクロールせずに固定表示しています。
「background-size:cover;」この指定が一番のミソですかね。
画像の縦横比は保持しつつ、背景領域を完全に覆う最小サイズになるように背景画像を拡大縮小してくれます。
こうして、お手軽なパララックスが実現する訳です。
…ただし、お手軽ゆえの注意点もあります。
スマホでご覧の方はご承知のとおり、スマートフォンには適用されません。
どうも情報を集めてみると、iOS Safariの場合、
「background-size:cover;」が適用されている時に「background-attachment: fixed;」が効かなくなるようです。何故に…
ここさえ解決してくれれば、非常に便利なCSSなのですが…
対応してくれないかな、apple様m(_ _)m
中には、これの解決を試みているエンジニアさんもいます。
今はCSSの紹介などが手一杯ですが、いずれはこのブログでもCSSの改善使用法なども紹介してやりますとも！