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

View Transitions API: Page Navigation with Morphing Elements

プログラミング
DeepSeek
P

Prompt

Create a multi-page navigation demo using the View Transitions API where specific elements morph between pages. Implement a simple website with 3 pages where the main content area smoothly transforms between different layouts while maintaining visual continuity. The navigation should use semantic HTML and the transition should be triggered with a single line of JavaScript.

CODE PREVIEW

エディタを読み込み中…

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

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

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

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

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

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

このデモは、要素変形を伴うスムーズなページ遷移を作成するためのView Transitions APIを紹介しています。実装の特徴:

主な機能:

  • 要素変形: メインコンテンツエリアと機能ボックスがページ間で異なるレイアウトにスムーズに変形します
  • 1行での遷移: ページ遷移はdocument.startViewTransition()の1行でトリガーされます
  • セマンティックナビゲーション: 適切なHTML5セマンティック要素とアクセシブルなナビゲーションを使用しています
  • 視覚的連続性: 要素は形状と内容を変化させながらも同一性を維持します

動作原理:

  1. 各ページにはview-transition-name CSSプロパティでマークされた要素があります
  2. ナビゲーション時に、ブラウザは新旧の状態のスナップショットをキャプチャします
  3. View Transitions APIがこれらの状態間を自動的にアニメーションします
  4. 特定の遷移グループにカスタムCSSアニメーションを適用できます

ブラウザサポート:

現在、Chrome 111+とEdge 111+でサポートされています。サポートされていないブラウザでは、シンプルなクロスフェードフォールバックでナビゲーションが機能します。

Prompt Overview

This demo showcases the View Transitions API for creating smooth page transitions with morphing elements. The implementation features:

Key Features:

  • Element Morphing: The main content area and feature box smoothly transform between different layouts across pages
  • Single-Line Transition: Page transitions are triggered with just document.startViewTransition()
  • Semantic Navigation: Uses proper HTML5 semantic elements and accessible navigation
  • Visual Continuity: Elements maintain their identity while changing shape and content

How It Works:

  1. Each page has elements marked with view-transition-name CSS properties
  2. When navigating, the browser captures snapshots of old and new states
  3. The View Transitions API animates between these states automatically
  4. Custom CSS animations can be applied to specific transition groups

Browser Support:

Currently supported in Chrome 111+ and Edge 111+. For unsupported browsers, the navigation still works with a simple cross-fade fallback.

Was this prompt helpful?

Comments

Comments appear after moderation

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

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

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

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

見る
Homeヘルプ