View Transitions API: 共有要素モーフィング付きページ遷移
P
Prompt
Create a page transition using the View Transitions API where a shared element (like a card or button) smoothly morphs between two different pages. The element should change position, size, and content while maintaining a fluid animation.
VISTA DE CÓDIGO
Personalizar código con IA
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を使用して共有要素のモーフィングを含むスムーズなページ遷移を作成する方法を紹介します。ユーザーが「詳細を見る」ボタンをクリックすると、視覚的な連続性を保ちながら詳細な商品ページへと滑らかに変形します。
主な特徴
- 共有要素モーフィング: 「詳細を見る」ボタンが異なるページ間で滑らかに変形
- クロスフェードアニメーション: 背景やその他の要素が遷移中に滑らかにフェード
- プログラム制御: JavaScript APIによる遷移動作の精密な制御
- フォールバック対応: View Transitions APIをサポートしていないブラウザへの対応
動作の仕組み
- 各インタラクティブ要素には一意の識別子を持つ
data-view-transition属性が設定されています - クリックされると、JavaScriptがクリックイベントをキャプチャし、デフォルトのナビゲーションを防止します
- 要素に
view-transition-nameCSSプロパティが割り当てられます - ナビゲーションロジックと共に
document.startViewTransition()が呼び出されます - ブラウザが古い状態と新しい状態の間のモーフィングアニメーションを自動的に作成します
ブラウザサポート
View Transitions APIは現在、Chrome 111+およびEdge 111+でサポートされています。サポートされていないブラウザでは、アニメーションなしで即座にナビゲーションを行うフォールバックコードが含まれています。
カスタマイズのヒント
::view-transition-groupCSSルールでアニメーションの持続時間を調整- さまざまなアニメーション効果に異なるイージング関数を使用
- 複雑なアニメーションのために異なる要素に異なる遷移名を適用
- 追加効果のためにCSSアニメーションと組み合わせ
¿Te resultó útil este prompt?
Comentarios
Los comentarios aparecen después de la moderación
この記事が役に立ったら投げ銭で応援
Apple Pay / Google Pay / クレジットカード対応 · Stripeで安全に決済
開発者が選ぶ最強ツール集
運営者が毎日使っているツール・ガジェット 6選