画像ギャラリーナビゲーションのためのView Transitions API
Prompt
Create an image gallery with smooth transitions between images using the View Transitions API. When clicking navigation arrows, the current image should smoothly morph into the next/previous image with a cross-fade effect. Include a thumbnail navigation bar that also uses smooth transitions when changing images.
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 Transitions APIは、異なるDOM状態間でスムーズな遷移を作成できる最新のブラウザ機能です。この例では、ギャラリー画像を変更する際にメイン画像をアニメーション化するために使用しています。このAPIは古い状態のキャプチャを作成し、DOMを更新し、新しい状態をキャプチャして、それらの間をアニメーション化します。
主な機能：
- 画像間のスムーズなクロスフェードとスケールアニメーション
- アクティブ状態のハイライト付きサムネイルナビゲーション
- キーボードナビゲーションのサポート（矢印キー）
- すべての画面サイズで動作するレスポンシブデザイン
- View Transitions APIをサポートしていないブラウザのためのフォールバック
- 遷移効果のためのカスタムCSSアニメーション
この実装では、::view-transition-groupおよび::view-transition-new/old疑似要素を使用して遷移アニメーションをカスタマイズしています。メイン画像には、アニメーション化する要素として識別するためのview-transition-nameプロパティがあります。
¿Te resultó útil este prompt?
Comentarios
Los comentarios aparecen después de la moderación
この記事が役に立ったら投げ銭で応援
Apple Pay / Google Pay / クレジットカード対応 · Stripeで安全に決済
開発者が選ぶ最強ツール集
運営者が毎日使っているツール・ガジェット 6選