メニューリビール — 動きの伝え方辞典

transition

menu reveal / overlay menu animation

メニューリビール

ハンバーガーを押すとオーバーレイが画面を覆い、ナビ項目が上から時間差で滑り込む定番の開閉演出。幕が下りる動きと項目のstaggerをどう重ねるかのタイミング設計がすべてで、ここが揃うとサイトの格が一段上がる。

01 — Demo video

Play live →

02 — Prompt template

ハンバーガーメニューに menu reveal を実装してください。

- オーバーレイは画面全体を覆う固定レイヤー(position: fixed、最上位のz-index)とし、transform: translateY(-101%)→0 に {{duration}}s で下ろす
- easingは cubic-bezier(0.77, 0, 0.175, 1) のようなease-in-out系を使う
- ナビ項目は各行を overflow: hidden のマスクで包み、内側のテキストを translateY(110%)→0 で滑り込ませる
- 項目は上から順に {{stagger}}s ずつ遅らせ、開始はオーバーレイが下り切る少し前(durationの5〜6割経過時点)に重ねて間延びを防ぐ
- 閉じるときは項目を先に(逆順で素早く)引き、少し遅れてオーバーレイを上げる
- 動かすのは transform と opacity のみ。メニューが開いている間は背面のスクロールを固定する
- prefers-reduced-motion 時はスライドとstaggerをやめ、フェードのみ(または即時)で開閉する

ハンバーガーメニューに menu reveal を実装してください。

- オーバーレイは画面全体を覆う固定レイヤー(position: fixed、最上位のz-index)とし、transform: translateY(-101%)→0 に {{duration}}s で下ろす
- easingは cubic-bezier(0.77, 0, 0.175, 1) のようなease-in-out系を使う
- ナビ項目は各行を overflow: hidden のマスクで包み、内側のテキストを translateY(110%)→0 で滑り込ませる
- 項目は上から順に {{stagger}}s ずつ遅らせ、開始はオーバーレイが下り切る少し前(durationの5〜6割経過時点)に重ねて間延びを防ぐ
- 閉じるときは項目を先に(逆順で素早く)引き、少し遅れてオーバーレイを上げる
- 動かすのは transform と opacity のみ。メニューが開いている間は背面のスクロールを固定する
- prefers-reduced-motion 時はスライドとstaggerをやめ、フェードのみ(または即時)で開閉する

ハンバーガーメニューに menu reveal を実装してください。

- オーバーレイは画面全体を覆う固定レイヤー(position: fixed、最上位のz-index)とし、transform: translateY(-101%)→0 に {{duration}}s で下ろす
- easingは cubic-bezier(0.77, 0, 0.175, 1) のようなease-in-out系を使う
- ナビ項目は各行を overflow: hidden のマスクで包み、内側のテキストを translateY(110%)→0 で滑り込ませる
- 項目は上から順に {{stagger}}s ずつ遅らせ、開始はオーバーレイが下り切る少し前(durationの5〜6割経過時点)に重ねて間延びを防ぐ
- 閉じるときは項目を先に(逆順で素早く)引き、少し遅れてオーバーレイを上げる
- 動かすのは transform と opacity のみ。メニューが開いている間は背面のスクロールを固定する
- prefers-reduced-motion 時はスライドとstaggerをやめ、フェードのみ(または即時)で開閉する

03 — Params

duration(オーバーレイの開閉時間 s) — 範囲 0.3〜1.2 / 初期 0.6
0.5〜0.8sが目安。ナビは毎回使うUIなので、演出優先で1sを超えると確実に鬱陶しくなる。
stagger(項目間の遅延 s) — 範囲 0.03〜0.15 / 初期 0.06
0.05〜0.08sが心地よい。0.1sを超えると項目数×遅延ぶんの待ち時間が目立ち始める。

04 — Vocab

オーバーレイ — 画面全体を覆うメニューの幕。position: fixed + 最上位z-indexで置き、transform(またはclip-path)で出し入れする。
マスク+translateY — 各行をoverflow: hiddenで包み、内側のテキストをずらして隠す手法。行が「切り抜きの中から立ち上がる」見え方になる。
stagger — 複数要素を一定間隔で遅らせて順に動かすこと。ナビ項目なら0.05〜0.08s間隔が定番。
スクロールロック — メニューが開いている間、背面のbodyスクロールを止める処理。忘れると背景だけが流れてメニューと視界がずれる。

05 — NG → OK examples

言い方: 「「ハンバーガーメニューをおしゃれにアニメーションさせて」」

なぜNG: 幕と項目の時間関係が未定義。オーバーレイが完全に開き切ってから項目が動き出す間延び実装や、閉じるときに項目が置き去りのまま幕だけ上がる実装が返ってきやすい。

言い方: 「「menu revealを実装。オーバーレイはtranslateY(-101%)→0を0.6s、ナビ各行はoverflow:hiddenのマスク+translateY(110%)→0を0.06sずらし。項目の開始は幕が下り切る少し前から。閉じは項目を逆順で先に引く。reduced-motionはフェードのみ」」

なぜOK: 幕・項目・両者の重なり・閉じの順序まで指定できている。「下り切る少し前から」の一言で間延びが消える。