見た目だけでなく、何をきっかけに動くかが違います。コピーされるJavaScriptもそれに合わせて変わります。
<style> の中身をCSSファイルへ移す<div class="pt-...">）を <body> 直下に置く<script> の中身をJSファイルへ移す幕は「閉じた状態」から始まります。到着したページで読み込み直後に開くことで、移動が1本の動きにつながって見えます。
<!-- body 直下に置く。transform を持つ親の中に入れないこと -->
<div class="pt-split-x" aria-hidden="true"><i></i><i></i></div>
<noscript><style>.pt-split-x { display: none; }</style></noscript>同一オリジンのページ遷移なら、対応ブラウザに限ればJavaScriptなしでも書けます。CSSの見た目部分は本ツールのコードをそのまま流用できます。
@view-transition { navigation: auto; }
::view-transition-new(root) {
animation: pt-open 0.6s cubic-bezier(0.76, 0, 0.24, 1);
}
@keyframes pt-open {
from { clip-path: inset(0 0 0 100%); }
to { clip-path: inset(0 0 0 0); }
}短く書ける代わりに、未対応のブラウザでは演出が省略されます（遷移自体は普通に行われます）。確実に全ブラウザで動かしたい場合は、本ツールのJavaScript方式を使ってください。
<style> の中身をCSSファイルへ、<script> の中身をJSファイルへ移してください。幕のHTMLは <body> 直下など、できるだけ浅い位置に置きます。display: none で消す1行を入れています。消し忘れないでください。window の load を待つだけなので3行で済みます。見た目の動きはすべてCSSで、外部ライブラリの読み込みはありません。@view-transition { navigation: auto; } と keyframes の数行で書け、JavaScriptも不要です。ただし対応ブラウザが限られ、同一オリジンのページ遷移に限られます。本ツールは全ブラウザで確実に動く従来のJavaScript方式を採用しています。どちらもCSSの見た目部分は流用できます。a[href^="/"] というセレクタで内部リンクだけを対象にしています。相対パスやフルURLでリンクを書いているサイトでは、このセレクタを実際のリンクの書き方に合わせて変更してください。また、別タブで開くリンクや外部リンクは対象から外すのが安全です。@property を使うため、対応していないブラウザでは数字が0のまま止まります。「円形に開く」「対角線でスパッと切れる」は clip-path を使います。いずれも最新のChrome / Edge / Safari / Firefoxで動作します。