View Transitions API: 共有要素付きモーフィングナビゲーション
Prompt
Create a multi-page navigation with View Transitions API where specific elements morph between pages. Implement a main navigation with 3 pages (Home, About, Contact) where the active page indicator smoothly transforms between navigation items during page transitions. Include a shared hero section that maintains visual continuity with subtle size/position changes. Add a content card that appears differently on each page but transitions smoothly with shared element transitions.
VISTA DE CÓDIGO
La IA reescribe este código según tus instrucciones. La vista previa es gratuita; copia y descarga por ¥100.
AIとの対話に追加する一言
プロンプトと一緒にコピーして、AIがより正確に意図を汲み取れるようにします
このコードをそのまま使いたいので、CDNリンクも含めた完全なHTMLファイルとして出力してください。
初心者なので、各行にコメントを追加して、何をしているか説明してください。
このコードをWordPressのテーマに組み込む方法も教えてください。
動作確認済みのコードをお願いします。エラーが出る場合の対処法も含めて。
この実装は、共有要素トランジションとモーフィングナビゲーションを備えたView Transitions APIの高度な使用法を示しています。主な機能は以下の通りです：
共有要素トランジション
ヒーローセクション、ページタイトル、ヒーローテキスト、コンテンツカードにはすべて固有のview-transition-nameプロパティが設定されており、ページ遷移中に共有要素として追跡されます。View Transitions APIは、これらの要素の位置、サイズ、コンテンツが変化する際に、自動的に滑らかなアニメーションを作成します。
モーフィングナビゲーションインジケーター
アクティブページインジケーターは、CSSトランスフォームを使用してナビゲーション項目間で滑らかに変形します。ユーザーが異なるナビゲーションリンクをクリックすると、インジケーターはカスタムイージング関数を使用して新しい位置にアニメーションし、流動的なモーフィング効果を生み出します。
ページ固有のスタイリング
各ページ（ホーム、アバウト、コンタクト）には、コンテンツカードとヒーローセクションに対して異なるスタイリングが適用されています。これらの視覚的な違いにもかかわらず、View Transitions APIは異なる状態間を滑らかに遷移させることで連続性を維持します。
プログラムによるトランジション
ナビゲーションはdocument.startViewTransition()を使用してプログラムで処理され、カスタムトランジションロジックとAPIをサポートしていないブラウザーのためのフォールバック動作が可能です。
パフォーマンスの考慮事項
View Transitions APIは、滑らかなアニメーションのためにハードウェアアクセラレーションを使用します。実装には、適切なクリーンアップとエラーハンドリングが含まれており、さまざまなブラウジングシナリオで堅牢な動作を保証します。
¿Te resultó útil este prompt?
Comentarios
Los comentarios aparecen después de la moderación
この記事が役に立ったら投げ銭で応援
Apple Pay / Google Pay / クレジットカード対応 · Stripeで安全に決済
開発者が選ぶ最強ツール集
運営者が毎日使っているツール・ガジェット 6選