CROSS-DOCUMENT VIEW TRANSITIONS
一覧から詳細へ、画像とタイトルがつながる。ページ間の動きを調整して試せます。
LIVE MULTI-PAGE SITE
LANDSCAPE / EXPLORATION
地形を、やわらかいレイヤーに。等高線を重ね、自然の起伏をシンプルな造形へ置き換えるシリーズ。
ABOUT THIS PROJECT
地形の輪郭を積み重ねたランドスケープ。画像が移動する間も同じ図形を追えるので、ページの関係を確認できます。
一覧へ戻って、もう一度試すUSE IN YOUR SITE
一覧と詳細にある同じ要素へ、同じview-transition-nameを指定します。通常のリンクをクリックすると、ブラウザーが遷移を描画します。
同じページ内では、名前を重複させないでください。複数のカードには、それぞれ異なる名前を使います。
現在の設定のCSS・4枚のHTML・画像をZIPで保存します。展開後は、ローカルサーバーかWebサーバーで開いてください。
CURRENT SETTINGS
両ページで読み込む、現在の設定の遷移CSSです。
IMPLEMENTATION NOTES
プロトコル・ホスト・ポートが同じページ同士で使います。両方のページに@view-transitionを指定します。
リンクは通常の<a href>です。ページ間遷移に未対応のブラウザーでは、アニメーションなしで表示します。
prefers-reduced-motion: reduceでは遷移を無効にします。画像やページの内容はそのまま利用できます。
参考：MDN：@view-transition · view-transition-name · Chrome：ページ間のView Transition