CSS Scroll-Driven Animations: Interactive Progress Timeline
Prompt
Create a horizontal timeline that animates as the user scrolls vertically. Each timeline item should have a progress indicator that fills based on scroll position, with smooth transitions between states.
CODE PREVIEW
AIとの対話に追加する一言
プロンプトと一緒にコピーして、AIがより正確に意図を汲み取れるようにします
このコードをそのまま使いたいので、CDNリンクも含めた完全なHTMLファイルとして出力してください。
初心者なので、各行にコメントを追加して、何をしているか説明してください。
このコードをWordPressのテーマに組み込む方法も教えてください。
動作確認済みのコードをお願いします。エラーが出る場合の対処法も含めて。
この実装は、インタラクティブな進捗タイムラインを備えたCSSスクロール駆動アニメーションを示しています。上部に固定された水平タイムラインは、垂直スクロール位置に基づいて塗りつぶされる進捗インジケーターを表示します。各タイムラインマーカーは、対応するセクションがビューポートに入るときに灰色から紫色にアニメーションし、コンテンツラベルにはスムーズな不透明度と変形遷移が適用されます。
タイムライントラックは、全体のスクロール位置に基づいて0％から100％に進行する線形グラデーションを使用し、連続的なプログレスバー効果を作り出します。各セクションのコンテンツは、view()タイムラインを使用してビューポートに入るときにフェードインし、上にスライドします。
これは完全にCSSで実現されており、スクロールベースのアニメーションにはanimation-timeline: scroll(root)を、ビューポートベースのアニメーションにはanimation-timeline: view()を使用しています。animation-rangeプロパティは、各タイムライン項目がそのインデックス位置に基づいていつアニメーションするかを制御します。
Prompt Overview
This implementation demonstrates CSS Scroll-Driven Animations with an interactive progress timeline. The fixed horizontal timeline at the top shows progress indicators that fill based on vertical scroll position. Each timeline marker animates from gray to purple as its corresponding section enters the viewport, with smooth opacity and transform transitions for the content labels.
The timeline track uses a linear gradient that progresses from 0% to 100% based on the overall scroll position, creating a continuous progress bar effect. Each section content fades in and slides up as it enters the viewport using the view() timeline.
This is achieved entirely with CSS, using animation-timeline: scroll(root) for scroll-based animations and animation-timeline: view() for viewport-based animations. The animation-range property controls when each timeline item animates based on its index position.
Was this prompt helpful?
Comments
Comments appear after moderation
この記事が役に立ったら投げ銭で応援
Apple Pay / Google Pay / カード (Visa/Mastercard/JCB/Amex) / Link / Alipay / WeChat Pay 対応 · Stripeで安全に決済
開発者が選ぶ最強ツール集
運営者が毎日使っているツール・ガジェット 6選