画像ギャラリーナビゲーションのためのView Transitions API
プロンプト
View Transitions APIを使用して、画像間のスムーズな遷移を実現する画像ギャラリーを作成してください。ナビゲーション矢印をクリックすると、現在の画像が次の/前の画像にクロスフェード効果でスムーズに変形するようにします。画像を変更する際にもスムーズな遷移を使用するサムネイルナビゲーションバーも含めてください。
CODE PREVIEW
このコードをAIが指示通りに書き換えます。プレビューは無料、コードのコピー・ダウンロードは¥100で解放されます。
AIとの対話に追加する一言
プロンプトと一緒にコピーして、AIがより正確に意図を汲み取れるようにします
このコードをそのまま使いたいので、CDNリンクも含めた完全なHTMLファイルとして出力してください。
初心者なので、各行にコメントを追加して、何をしているか説明してください。
このコードをWordPressのテーマに組み込む方法も教えてください。
動作確認済みのコードをお願いします。エラーが出る場合の対処法も含めて。
この実装は、ギャラリー内の画像間でスムーズなネイティブライクな遷移を作成するためのView Transitions APIをデモンストレーションしています。メイン画像は、矢印ボタンまたはサムネイルナビゲーションを使用して画像間を移動する際に、スムーズにクロスフェードおよびスケーリングします。
View Transitions APIは、異なるDOM状態間でスムーズな遷移を作成できる最新のブラウザ機能です。この例では、ギャラリー画像を変更する際にメイン画像をアニメーション化するために使用しています。このAPIは古い状態のキャプチャを作成し、DOMを更新し、新しい状態をキャプチャして、それらの間をアニメーション化します。
主な機能：
- 画像間のスムーズなクロスフェードとスケールアニメーション
- アクティブ状態のハイライト付きサムネイルナビゲーション
- キーボードナビゲーションのサポート（矢印キー）
- すべての画面サイズで動作するレスポンシブデザイン
- View Transitions APIをサポートしていないブラウザのためのフォールバック
- 遷移効果のためのカスタムCSSアニメーション
この実装では、::view-transition-groupおよび::view-transition-new/old疑似要素を使用して遷移アニメーションをカスタマイズしています。メイン画像には、アニメーション化する要素として識別するためのview-transition-nameプロパティがあります。
このプロンプトは役に立ちましたか？
コメント
コメントは承認後に表示されます
この記事が役に立ったら投げ銭で応援
Apple Pay / Google Pay / クレジットカード対応 · Stripeで安全に決済
開発者が選ぶ最強ツール集
運営者が毎日使っているツール・ガジェット 6選