ページ遷移オーバーレイカーテン
クリックすると .pt-overlay という全画面パネルが下から競り上がり、画面を覆ってから今度は上へ抜けていく演出です。実体は position:fixed;inset:0 の 1 枚の div で、 transform:translateY() を is-in ／ is-out クラスで切り替えているだけ。
解説
クリックすると .pt-overlay という全画面パネルが下から競り上がり、画面を覆ってから今度は上へ抜けていく演出です。実体は position:fixed;inset:0 の 1 枚の div で、transform:translateY() を is-in／is-out クラスで切り替えているだけ。動きの本体は CSS の transition が担い、JS は setTimeout でクラスの付け外しのタイミングだけを管理します。cubic-bezier(.77,0,.18,1) で立ち上がりが速く終わりが滑らかな、SPA や PJAX のような“間”を演出できます。
使う場面
- ページ移動の瞬間にワンクッション入れたいポートフォリオやブランドサイト
- 実際の遷移前にローディングを隠したいギャラリー系サイト
- セクション切り替えの区切りを印象づけたい LP
色はオーバーレイの linear-gradient(135deg,#667eea,#f093fb) を差し替えれば一発で世界観が変わります。覆っている時間は JS 側の setTimeout の値（900ms 前後）で調整してください。注意点として、覆っている間も背後を操作させないため pointer-events:none の付け外しを意識し、長い演出は離脱の原因になるので合計 1.5 秒程度までに抑えるのが無難です。
使用例・適したシーン
- SPA / PJAX 風 Web サイト
- ポートフォリオの遷移演出
よくある質問
本当にページ遷移しますか?
このスニペット自体はオーバーレイの開閉アニメーションだけを再現したデモです。実際の遷移を伴わせたい場合は、オーバーレイが画面を覆い切ったタイミングで location.href を書き換えるか、SPA のルーティング処理を呼び出してください。
覆う方向や速度は変えられますか?
変えられます。translateY を translateX に直せば横方向のカーテンになり、CSS の transition 時間と JS の setTimeout の数値を揃えて増減すれば速度を調整できます。