Animaciones CSS Scroll-Driven: Timeline con Progreso
VISTA DE CÓDIGO
Prompt
Create an interactive timeline with cards that animate as you scroll. Each card should have a progress bar that fills based on scroll position, and the cards should fade in and slide into position. Use CSS scroll-driven animations with @scroll-timeline and animation-timeline.
このインタラクティブなタイムラインは、CSSスクロール駆動アニメーションを実演しています。これはJavaScriptを使用せずにスクロール位置によってアニメーションを制御できる最新のCSS機能です。各カードはスクロールに応じてスライドイン効果で表示され、進行状況バーはそのカードのセクションを通るスクロールの進捗に比例して充填されます。
実装では、@scroll-timelineを使用してスクロールタイムラインを定義し、animation-timelineを使用してアニメーションをスクロール進捗に紐付けています。animation-rangeプロパティは、ビューポート内の要素の位置に対して各アニメーションがいつ開始・終了するかを制御します。
この技術は、モダンブラウザでネイティブに動作するスムーズでパフォーマンスの高いスクロール連動アニメーションを提供し、タイムライン、進捗インジケーター、スクロールトリガーによるコンテンツ表示などで魅力的なユーザー体験を実現します。
Resumen del prompt
Este prompt genera un componente de línea de tiempo interactiva en la que cada tarjeta cobra vida conforme el usuario desplaza la página. La técnica central es CSS puro con animaciones dirigidas por scroll, usando las propiedades modernas @scroll-timeline y animation-timeline, lo que elimina la necesidad de JavaScript para lograr efectos de aparición progresiva, deslizamiento y barras de progreso que se rellenan en tiempo real según la posición del scroll.
Es ideal para portafolios, páginas de proceso o presentaciones de hitos de proyecto donde se quiere guiar visualmente al usuario a través de etapas. Para reproducirlo, basta con copiar el prompt en un modelo con capacidad de generar código como GPT-4o o Claude 3.5, y ajustar el número de tarjetas, los colores o la dirección del deslizamiento según el diseño deseado. Una variación interesante es combinar el efecto con View Transitions API para transiciones entre páginas igualmente fluidas, o adaptar el componente a un framework como React usando bibliotecas como Framer Motion si se busca mayor compatibilidad entre navegadores.
¿Te resultó útil este prompt?
Comentarios
Los comentarios aparecen después de la moderación
この記事が役に立ったら投げ銭で応援
Apple Pay / Google Pay / カード (Visa/Mastercard/JCB/Amex) / Link / Alipay / WeChat Pay 対応 · Stripeで安全に決済
開発者が選ぶ最強ツール集
運営者が毎日使っているツール・ガジェット 6選