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 rewrites this code based on your instructions. Preview is free; copy & download unlocked for ¥100.
AIとの対話に追加する一言
プロンプトと一緒にコピーして、AIがより正確に意図を汲み取れるようにします
このコードをそのまま使いたいので、CDNリンクも含めた完全なHTMLファイルとして出力してください。
初心者なので、各行にコメントを追加して、何をしているか説明してください。
このコードをWordPressのテーマに組み込む方法も教えてください。
動作確認済みのコードをお願いします。エラーが出る場合の対処法も含めて。
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 / クレジットカード対応 · Stripeで安全に決済
開発者が選ぶ最強ツール集
運営者が毎日使っているツール・ガジェット 6選