View Transitions API for Image Gallery Navigation
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.
CODE PREVIEW
AI rewrites this code based on your instructions. Preview is free; copy & download unlocked for ¥100.
AIとの対話に追加する一言
プロンプトと一緒にコピーして、AIがより正確に意図を汲み取れるようにします
このコードをそのまま使いたいので、CDNリンクも含めた完全なHTMLファイルとして出力してください。
初心者なので、各行にコメントを追加して、何をしているか説明してください。
このコードをWordPressのテーマに組み込む方法も教えてください。
動作確認済みのコードをお願いします。エラーが出る場合の対処法も含めて。
This implementation demonstrates the View Transitions API for creating smooth, native-like transitions between images in a gallery. The main image smoothly cross-fades and scales when navigating between images using either the arrow buttons or thumbnail navigation.
The View Transitions API is a modern browser feature that allows creating smooth transitions between different DOM states. In this example, we use it to animate the main image when changing between gallery images. The API creates a capture of the old state, updates the DOM, captures the new state, and then animates between them.
Key features include:
- Smooth cross-fade and scale animations between images
- Thumbnail navigation with active state highlighting
- Keyboard navigation support (arrow keys)
- Responsive design that works on all screen sizes
- Fallback for browsers that don't support the View Transitions API
- Custom CSS animations for the transition effect
The implementation uses the ::view-transition-group and ::view-transition-new/old pseudo-elements to customize the transition animation. The main image has a view-transition-name property that identifies it as the element to animate.
Was this prompt helpful?
Comments
Comments appear after moderation
この記事が役に立ったら投げ銭で応援
Apple Pay / Google Pay / クレジットカード対応 · Stripeで安全に決済
開発者が選ぶ最強ツール集
運営者が毎日使っているツール・ガジェット 6選