使い方
— USAGE↑ これは架空のデザインスタジオ「MERIDIAN」の想定サイト。Work / Studio / Contact を行き来する遷移にページ名スワイプを使う例です。少人数スタジオ・ポートフォリオ・ブランドサイトなど「体験の質を取る」サイト向けの演出。
01
2 ファイルをコピー
style.css / script.js を移植先へ。外部依存ゼロ。
02
マークアップ
.swipe[data-page-swipe] の中に、ナビ（[data-sw-to]）・ページ群（.sw-page[data-sw-name]）・オーバーレイ（[data-sw-overlay] + [data-sw-label]）を置く。
03
2 フェーズ遷移
① オーバーレイが右→中央で画面を覆い、巨大な行き先名を表示 ② 中身を差し替え ③ オーバーレイが中央→左へ抜けて新ページを出す。
カスタマイズ可能な CSS 変数
--sw-dur1 フェーズ（覆う / 抜ける）の時間620ms--sw-easeイージングcubic-bezier(.76,0,.24,1)--sw-overlay-bgオーバーレイの背景色#0a0a0a--sw-label巨大ページ名の色#fff--sw-stage-hステージ高さmin(78vh,640px)