カーテン遷移
ボタンを押すと色面がスライドして画面を覆い、めくれて次の内容が現れる。ページ切り替え演出の定番。
プレビュー
クリック
操作クリック／タップで動きます。
仕様書
- 向く場面
- ページ・セクション切替の場面転換
- ゲーム・ポートフォリオの画面遷移演出
- 内容の差し替えを一拍置いて見せたいとき
- 避ける場面
- 頻繁に切り替える一覧のタブ（待たされる）
- 本文を読む途中で自動発火する遷移
- reduce 設定で代替の無い組み込み
- 構成要素
- シーン1
- シーン2
- 遷移ボタン
- 暗幕（カーテン）
- 持っている状態
- 通常
- ホバー
- フォーカス
- キーボード
Tab で「次へ」「戻る」ボタンに到達・Enter/Space で遷移を開始する。遷移後は表示側のボタンへフォーカスが移る。遷移中の連打は busy で無視
- 支援技術
非表示側のシーンに aria-hidden と inert を付け替え、読み上げと Tab の対象から外す。暗幕は pointer-events none の装飾。reduce では暗幕を出さず即座に切り替える
- 動き
暗幕が左から入る 380ms・右へ抜ける 380ms（cubic-bezier .4,0,.2,1）。切替の瞬間を隠して場面転換を演出。reduce では即時
デザインの要点
- 中身の差し替えは暗幕が画面を覆い切った animationend で行う。覆う前に変えると次の内容が一瞬透ける
- 入りと抜けを同じ 380ms・同じイージングにし、抜けは反対側へ流す。往復させると「戻った」印象になる
- 隠したシーンには opacity 0 だけでなく inert を付ける。見えないボタンに Tab が入ると操作が迷子になる
- reduce 設定では暗幕を省いて即座に切り替え、終状態を同じにする。animationend 待ちのまま止めると永久に遷移しない
コード（コピーして使えます）
<div class="ct-stage">
<div class="ct-scene ct-scene--a">
<p class="ct-text">シーン 1</p>
<button class="ct-btn" type="button">次へ →</button>
</div>
<div class="ct-scene ct-scene--b" aria-hidden="true" inert>
<p class="ct-text">シーン 2</p>
<button class="ct-btn" type="button">← 戻る</button>
</div>
<div class="ct-curtain" aria-hidden="true"></div>
</div>