マウス追従パララックス
マウス位置に応じて背景・中景・前景の3層が異なる量で動き、自然な奥行きが生まれる。
プレビュー
ホバー
操作カーソルを乗せると動きます（スマホはタップ）。
仕様書
- 向く場面
- ヒーローの背景に奥行きを与える
- ブランド・ゲーム系LPの第一印象
- マウスに反応する余白のある画面
- 避ける場面
- 本文の背景（文字の下で動くと読みにくい）
- 乗り物酔い・前庭障害に配慮が要る画面
- reduce 設定で追従を止められない組み込み
- 構成要素
- 背景層（星）
- 中景層（雲）
- 前景層（惑星）
- 操作ヒント
- 持っている状態
- 通常
- キーボード
マウス・タッチ専用（マウスはホバー追従・タッチはドラッグ）。装飾なので代替操作は不要。伝える情報は層の外のテキストで持つ
- 支援技術
純粋な装飾で情報を持たない。3層は aria-hidden で、見出しなどのテキストは層の外に置く。reduce 設定では追従を止めて静止した1枚絵にする
- 動き
ポインタ位置へ 100ms linear で追従・奥行きごとに移動量 18/40/70px。離れると原点へ戻る。reduce では動かない
デザインの要点
- 移動量は奥から 18/40/70px と奥行きに比例させる。等間隔だと層が同じ板に見えて奥行きが出ない
- 層は inset: -48px で枠より大きく敷く。最大移動量ぶんの余白が無いと端に背景色が覗く
- 追従は 100ms linear の短い transition で角を取る。長くすると遅れてついてくる酔いやすい動きになる
- タッチ端末では一度消したヒントを戻さない。指を離すたびに点滅すると案内ではなく煩わしさになる
コード（コピーして使えます）
<div class="mp-stage">
<!-- 背景レイヤ（ゆっくり動く）。3層とも装飾なので aria-hidden -->
<div class="mp-layer mp-bg" aria-hidden="true">
<div class="mp-star mp-s1"></div>
<div class="mp-star mp-s2"></div>
<div class="mp-star mp-s3"></div>
<div class="mp-star mp-s4"></div>
<div class="mp-star mp-s5"></div>
<div class="mp-star mp-s6"></div>
</div>
<!-- 中景レイヤ -->
<div class="mp-layer mp-mid" aria-hidden="true">
<div class="mp-cloud mp-c1"></div>
<div class="mp-cloud mp-c2"></div>
</div>
<!-- 前景レイヤ（速く動く） -->
<div class="mp-layer mp-fg" aria-hidden="true">
<div class="mp-planet"></div>
</div>
<p class="mp-hint">マウスを動かして</p>
</div>