パララックス
Parallax
別名: パララックス、視差効果、パララックススクロール、Parallax、Parallax scrolling
生態（さわってみる）
一言定義
スクロール量に応じて背景と前景を異なる速度で動かし、奥行きを演出するビジュアル表現。
分類
使う場面
- LPなどで世界観やブランドの印象を強めたいとき
- スクロールに連動した動きで、ページ体験に視覚的なリズムを作りたいとき
避ける場面
- 読みやすさや情報への到達速度を優先したいとき（NN/gはパララックスが可読性やパフォーマンスを損なうリスクを指摘する）
- prefers-reduced-motionを尊重すべき利用者が多いと想定されるとき（視差オフセットを無効化する）
近縁種との比較
ヒーローの背景演出として組み合わされることが多く、両者は併用されるがレイアウトの領域を指す語（ヒーロー）と、スクロール連動の視覚効果そのものを指す語（パララックス）という軸の違いがある。スティッキーヘッダーとはどちらもスクロール操作をきっかけに要素の見え方を変える点が共通するが、スティッキーヘッダーは要素を画面上に固定し続ける実用的なナビゲーション目的であるのに対し、パララックスは要素を固定せず速度差によって奥行きを見せる演出目的という違いがある。NN/gはパララックスが可読性やパフォーマンスを損なう場合があると指摘しており、本図鑑のデモもprefers-reduced-motionが有効な環境では視差オフセットを完全に無効化する。
実例リンク
アクセシビリティ
- role
- 装飾的な背景レイヤーはaria-hidden="true"にする
- キーボード操作
- 視差演出はキーボード操作に影響を与えない（通常のスクロールで到達できる）
- 補足
- prefers-reduced-motionが有効な環境では視差オフセットを完全に無効化し、通常のスクロールに戻す。background-attachment: fixedはモバイルで挙動が不安定なため、本デモはtransformベースで実装している