View Transitions API: 共有要素モーフィング付きページ遷移
P
プロンプト
View Transitions APIを使用して、共有要素（カードやボタンなど）が2つの異なるページ間でスムーズにモーフィングするページ遷移を作成します。要素は位置、サイズ、内容を変化させながら、流動的なアニメーションを維持する必要があります。
CODE PREVIEW
AIでコードをカスタマイズ
このコードをAIが指示通りに書き換えます。プレビューは無料、コードのコピー・ダウンロードは¥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アニメーションと組み合わせ
このプロンプトは役に立ちましたか？
コメント
コメントは承認後に表示されます
この記事が役に立ったら投げ銭で応援
Apple Pay / Google Pay / クレジットカード対応 · Stripeで安全に決済
開発者が選ぶ最強ツール集
運営者が毎日使っているツール・ガジェット 6選