/* ========================================================================== SISTEMA DE ANIMACIONES DE SCROLL (REUTILIZABLE) ========================================================================== Este archivo proporciona clases de utilidad para animar elementos a medida que entran en el viewport (scrollport). INSTRUCCIONES DE USO: 1. Importa este archivo en el de tu HTML. 2. Importa el archivo `scroll-fallback.js` al final de tu HTML. 3. Agrega las clases base al elemento que deseas animar: - .anim-fade-up (Aparece flotando hacia arriba) - .anim-scale-in (Aparece creciendo suavemente) - .anim-slide-right (Aparece deslizando desde la izquierda hacia la derecha) - .anim-slide-left (Aparece deslizando desde la derecha hacia la izquierda) 4. Opcional: Agrega clases de retraso (stagger) para crear secuencias: - .anim-stagger-1 - .anim-stagger-2 - .anim-stagger-3 TECNOLOGÍA: Utiliza CSS Scroll-Driven Animations nativo en navegadores modernos (Chrome 115+). En navegadores no compatibles (como Firefox), el JS de fallback agrega la clase `.is-visible` utilizando un IntersectionObserver para lograr un efecto similar con transiciones CSS tradicionales. ========================================================================== */ /* -------------------------------------------------------------------------- 1. ESTADOS INICIALES Y FALLBACK (IntersectionObserver) -------------------------------------------------------------------------- Estos estilos se aplican por defecto y configuran el estado inicial de los elementos antes de ser revelados (cuando no tienen .is-visible). Las transiciones se ejecutan si el script JS añade la clase .is-visible. */ /* Esconder elementos inicialmente en el fallback, prepararlos para transición */ [class*="anim-"]:not(.anim-counter) { opacity: 0; will-change: transform, opacity; transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.8s ease-out; } /* Modificadores de retraso para el fallback */ .anim-stagger-1 { transition-delay: 100ms; } .anim-stagger-2 { transition-delay: 200ms; } .anim-stagger-3 { transition-delay: 300ms; } /* Posiciones iniciales según el tipo de animación */ .anim-fade-up { transform: translateY(40px); } .anim-scale-in { transform: scale(0.85); } .anim-slide-right { transform: translateX(-40px); } .anim-slide-left { transform: translateX(40px); } /* El IntersectionObserver agregará esta clase al entrar al viewport */ [class*="anim-"].is-visible { opacity: 1; transform: translate(0) scale(1); } /* -------------------------------------------------------------------------- 2. SCROLL-DRIVEN ANIMATIONS (NATIVAS) -------------------------------------------------------------------------- Si el navegador soporta animation-timeline nativo, sobreescribimos las transiciones de fallback y asignamos los @keyframes que se vincularán directamente a la barra de scroll. */ @media (prefers-reduced-motion: no-preference) { @supports ((animation-timeline: view()) and (animation-range: entry)) { /* Limpiamos la configuración del fallback ya que usaremos animations */ [class*="anim-"]:not(.anim-counter) { opacity: 1; /* El keyframe controlará la opacidad */ transform: none; transition: none; /* Vincula la animación a la visibilidad del elemento */ animation-timeline: view(block); /* La animación ocurre desde que el elemento entra, hasta que cruza el 20% inferior de la pantalla */ animation-range: entry 0% cover 20%; /* Mantiene el último estado (opacity 1) al finalizar */ animation-fill-mode: both; } /* Definición de las animaciones nativas */ .anim-fade-up { animation-name: scrollRevealFadeUp; } .anim-scale-in { animation-name: scrollRevealScaleIn; } .anim-slide-right { animation-name: scrollRevealSlideRight; } .anim-slide-left { animation-name: scrollRevealSlideLeft; } /* Keyframes */ @keyframes scrollRevealFadeUp { from { opacity: 0; transform: translateY(60px); } to { opacity: 1; transform: translateY(0); } } @keyframes scrollRevealScaleIn { from { opacity: 0; transform: scale(0.85); } to { opacity: 1; transform: scale(1); } } @keyframes scrollRevealSlideRight { from { opacity: 0; transform: translateX(-50px); } to { opacity: 1; transform: translateX(0); } } @keyframes scrollRevealSlideLeft { from { opacity: 0; transform: translateX(50px); } to { opacity: 1; transform: translateX(0); } } /* Nota: Para scroll-driven nativo, los delays se logran ajustando el animation-range o con animaciones encadenadas. Para simplicidad, en modo nativo confiaremos en la posición física de los elementos para crear el stagger visual al hacer scroll. */ } }