AIGPAIGP
Prompt LibraryAllProgrammingImage GenerationStable DiffusionVideo GenerationMusic GenerationDesign
Toolsサイト診断WebP ConverterImage ResizeFavicon Generator
Start with AIGeminiChatGPTClaudeDeepSeekCursorAntiGravity

View Transitions API: Page Transition with Shared Element Morphing

プログラミング
DeepSeek
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.

CODE PREVIEW

エディタを読み込み中…

AIとの対話に追加する一言

プロンプトと一緒にコピーして、AIがより正確に意図を汲み取れるようにします

このコードをそのまま使いたいので、CDNリンクも含めた完全なHTMLファイルとして出力してください。

初心者なので、各行にコメントを追加して、何をしているか説明してください。

このコードをWordPressのテーマに組み込む方法も教えてください。

動作確認済みのコードをお願いします。エラーが出る場合の対処法も含めて。

このチュートリアルでは、View Transitions APIを使用して共有要素のモーフィングを含むスムーズなページ遷移を作成する方法を紹介します。ユーザーが「詳細を見る」ボタンをクリックすると、視覚的な連続性を保ちながら詳細な商品ページへと滑らかに変形します。

主な特徴

  • 共有要素モーフィング: 「詳細を見る」ボタンが異なるページ間で滑らかに変形
  • クロスフェードアニメーション: 背景やその他の要素が遷移中に滑らかにフェード
  • プログラム制御: JavaScript APIによる遷移動作の精密な制御
  • フォールバック対応: View Transitions APIをサポートしていないブラウザへの対応

動作の仕組み

  1. 各インタラクティブ要素には一意の識別子を持つdata-view-transition属性が設定されています
  2. クリックされると、JavaScriptがクリックイベントをキャプチャし、デフォルトのナビゲーションを防止します
  3. 要素にview-transition-name CSSプロパティが割り当てられます
  4. ナビゲーションロジックと共にdocument.startViewTransition()が呼び出されます
  5. ブラウザが古い状態と新しい状態の間のモーフィングアニメーションを自動的に作成します

ブラウザサポート

View Transitions APIは現在、Chrome 111+およびEdge 111+でサポートされています。サポートされていないブラウザでは、アニメーションなしで即座にナビゲーションを行うフォールバックコードが含まれています。

カスタマイズのヒント

  • ::view-transition-group CSSルールでアニメーションの持続時間を調整
  • さまざまなアニメーション効果に異なるイージング関数を使用
  • 複雑なアニメーションのために異なる要素に異なる遷移名を適用
  • 追加効果のためにCSSアニメーションと組み合わせ

Prompt Overview

This tutorial demonstrates how to use the View Transitions API to create smooth page transitions with shared element morphing. When users click the "View Details" button, it smoothly transforms into a detailed product page while maintaining visual continuity.

Key Features

  • Shared Element Morphing: The "View Details" button smoothly transforms between different pages
  • Cross-fade Animation: Background and other elements fade smoothly during transition
  • Programmatic Control: JavaScript API allows precise control over transition behavior
  • Fallback Support: Graceful degradation for browsers without View Transitions API support

How It Works

  1. Each interactive element has a data-view-transition attribute with a unique identifier
  2. When clicked, JavaScript captures the click event and prevents default navigation
  3. The element gets assigned a view-transition-name CSS property
  4. document.startViewTransition() is called with the navigation logic
  5. The browser automatically creates the morphing animation between the old and new states

Browser Support

The View Transitions API is currently supported in Chrome 111+ and Edge 111+. For unsupported browsers, the code includes a fallback that performs immediate navigation without animation.

Customization Tips

  • Adjust animation duration in the ::view-transition-group CSS rule
  • Use different easing functions for various animation effects
  • Apply different transition names to different elements for complex animations
  • Combine with CSS animations for additional effects

Was this prompt helpful?

Comments

Comments appear after moderation

この記事が役に立ったら投げ銭で応援

Apple Pay / Google Pay / カード (Visa/Mastercard/JCB/Amex) / Link / Alipay / WeChat Pay 対応 · Stripeで安全に決済

開発者が選ぶ最強ツール集

運営者が毎日使っているツール・ガジェット 6選

見る
Homeヘルプ