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

CSS Scroll-Driven Animation: Progress Timeline Prompt

プログラミング
DeepSeek
P

Prompt

Create a webpage that demonstrates CSS scroll-driven animations with an interactive progress timeline. The page should have a vertical timeline on the left showing milestones, and content sections on the right. As the user scrolls, the timeline should visually indicate progress through different stages with smooth animations. Each timeline marker should highlight when its corresponding content section is in view, and the content sections should have entrance animations triggered by scroll position.

CODE PREVIEW

エディタを読み込み中…

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

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

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

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

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

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

このチュートリアルでは、CSSスクロール駆動アニメーションを使用してインタラクティブな進捗タイムラインを作成する方法を実演します。タイムラインはスクロールの進捗を視覚的に追跡し、対応するコンテンツセクションがビューに入るとハイライト表示します。

使用されている主な技術：

  • animation-timeline: scroll(root) – スクロール連動アニメーション
  • animation-timeline: view() – ビューポートベースのアニメーション
  • @scroll-timeline – カスタムスクロールタイムラインの定義
  • Intersection Observer API – セクション検出
  • Smooth scroll behavior – ナビゲーションのスムーズスクロール

タイムライントラックは全体のスクロール進捗に基づいてグラデーション塗りつぶしをアニメーションし、コンテンツセクションはビューポートに入ったときにトリガーされるエントランスアニメーションを持っています。

Prompt Overview

This prompt instructs an AI coding assistant to build a self-contained webpage showcasing CSS scroll-driven animations paired with an interactive progress timeline. The layout features a fixed vertical timeline on the left that dynamically highlights each milestone marker as its corresponding content section scrolls into the viewport, while the right-hand content panels animate smoothly into view. It is an excellent reference for front-end developers who want to explore the modern animation-timeline and scroll() CSS APIs without relying on JavaScript scroll listeners.

Real-world use cases include product landing pages, portfolio case studies, onboarding flows, and annual report microsites — anywhere a clear sense of narrative progression enhances user engagement. To reproduce or extend this output, try specifying a color scheme, the number of timeline stages, or a horizontal scroll variant. Models with strong code generation capabilities, such as GPT-4o or Claude 3.5 Sonnet, handle this prompt particularly well and can adapt the structure to frameworks like React or Vue with minimal additional instruction.

Was this prompt helpful?

Comments

Comments appear after moderation

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

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

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

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

見る
Homeヘルプ