最終更新日 2023/10/20

パララックスの基本

Web制作でよく見かけるパララックスの基本について。
目次
  • パララックス備忘録
  • 背景画像を固定する
  • 画面スクロールに合わせて背景画像を差し替える

パララックス備忘録

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

背景画像を固定する

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

Mishima Shrine

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

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

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

1.
2.
3.
Fin.

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

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

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

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

iOS(iPhone)では動かない

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

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

クライアントサイド言語
サムネ画像
パララックスの基本