ページ遷移カーテン
リンクを押すと幕が下から閉じ、閉じきった瞬間に内容を差し替えて上へ開く。3ページ分の擬似ルーティングで、遷移中の連打も最後の行き先だけを採用する。
プレビュー
クリック
操作クリック／タップで動きます。
デザインの要点
- 閉じる幕は ease-in（加速）、開く幕は ease-out（減速）。「勢いよく覆って、静かに現れる」順が自然に見える
- 内容の差し替えは幕が完全に閉じた 1 フレームで行う。差し替えの瞬間が見えると演出の意味が無くなる
- 遷移中の再クリックは無視せず「最後の行き先」を覚えて幕が閉じた時に採用する。無視すると押せていない不安を作る
- 幕の色はページのアクセント色にすると、開いた先の世界観が先に伝わる。黒一色は重い印象になる
コード（コピーして使えます）
<div class="pt-app">
<nav class="pt-nav" aria-label="ページ">
<button class="pt-link pt-active" type="button" data-route="home">ホーム</button>
<button class="pt-link" type="button" data-route="works">制作事例</button>
<button class="pt-link" type="button" data-route="contact">お問い合わせ</button>
</nav>
<div class="pt-stage">
<div class="pt-url" id="ptUrl">/</div>
<div class="pt-page" id="ptPage" data-route="home">
<p class="pt-kicker">ミナト工房</p>
<h2 class="pt-title">木の道具を、毎日の手に。</h2>
<p class="pt-text">横浜の小さな工房で、椅子とカトラリーを作っています。</p>
</div>
<div class="pt-curtain" id="ptCurtain" aria-hidden="true"></div>
</div>
</div>