パララックスの基本

パララックス備忘録

2012年頃より流行りだしたパララックスについて。（もう流行りは過ぎたかな）

背景画像を固定する

単純に背景を固定したいだけであれば、background-attachment: fixed;だけでいける。

横幅（width）を指定しない場合、background-size: cover;を記述すると画面サイズに合わせて背景画像を拡大・縮小してくれる。

（背景をシームレスにするのならcoverは考慮しなくてもよい）

画面スクロールに合わせて背景画像を差し替える

要素の画面位置やテキストサイズに関して厳密に指定したい場合、メディアクエリで細かく記述したほうがよい。（今回はメディアクエリ未使用）

画像を多用するパララックスはダウンロード容量を食うので、特にスマホ場合にはパケットを無駄に消費する。（アクセシビリティに配慮していない）

画像容量を小さくする方法にはWebPを利用する手もあるが、現状Safari系のブラウザに対応していないという欠点もある（2020年辺りからSafari系のブラウザにも対応が進んでいるようだ）。

シームレスにしてしまえば容量を食わないので、入れられるようであれば活用する。

iOS（iPhone）では動かない

iPhoneを使った実機テストを行えば分かるが、上記のやり方（簡単なパララックス導入方法）ではうまく実装できないので注意。（Chromeのエミュレータなら動くんだけどね、盲点です）

一応回避する方法もあるようなので、また時間が確保できたときに理解しておこうと思います。