CROSS-DOCUMENT VIEW TRANSITIONS
一覧から詳細へ、画像とタイトルがつながる。ページ間の動きを調整して試せます。
LIVE MULTI-PAGE SITE
INDEPENDENT DESIGN COLLECTION
気になるプロジェクトを開いてください。
OBJECT / EXPLORATION
形の探求 / プロダクト / 立体
LANDSCAPE / EXPLORATION
レイヤー / ランドスケープ / 輪郭
PATTERN / EXPLORATION
反復 / グラフィック / システム
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