Ken Burns
画像がゆっくりズームしながらパンし続ける、映画的なヒーロー演出。ヒーロー用途のため常時アニメーションする。
プレビュー
自動再生
操作自動で再生されます。
仕様書
- 向く場面
- ヒーローの写真を印象的に見せる
- 旅行・不動産・料理など写真主役の LP
- 動画を用意できない場面の動画的演出
- 避ける場面
- 写真の上に長文を置く（可読性低下）
- reduce 設定で停止できない組み込み
- 多数の写真を同時に動かすグリッド
- 構成要素
- ステージ
- 画像（120%）
- 暗色オーバーレイ
- 見出し
- サブテキスト
- 持っている状態
- 通常
- キーボード
操作要素なし（背景演出）。重ねる見出し・リンクが通常どおりフォーカスを受ける
- 支援技術
画像は aria-hidden の装飾で、意味はオーバーレイの見出し・本文テキストが持つ。reduce 設定では最初の構図（scale 1.06）で静止する
- 動き
8s ease-in-out alternate で scale 1.06→1.30 とパン(-5%,-3%)→(5%,4%) を往復。静止写真に時間の流れを与える。reduce では静止
デザインの要点
- 画像は 120% で敷いて inset −10% に置く。100% のままズームすると端が動いた瞬間に背景色が覗く
- 8s ease-in-out alternate で往復させる。linear や短い周期は監視カメラの動きに見える
- ズームとパンを同時に、逆方向へ。ズームだけだと「寄る」だけで視線が動かず時間の流れが出ない
- 文字は下部の暗いグラデの上に置く。動く写真の明るい部分が文字の下を通ると読めなくなる
コード（コピーして使えます）
<div class="kb-stage">
<!-- <img src="..." alt="..."> に置き換えて使う（object-fit:cover で同様に動く） -->
<div class="kb-img" aria-hidden="true"></div>
<div class="kb-overlay">
<p class="kb-title">Horizon</p>
<p class="kb-sub">ゆっくり流れる、特別な瞬間</p>
</div>
</div>