Hay algunas animaciones de desplazamiento que son posibles en CSS sin ningún JavaScript. Basta con mirar el capítulo sobre el indicador de desplazamiento, que es claramente magia CSS. Pero podemos hacer mucho trabajo de animación de desplazamiento directamente en CSS con solo un poco de información proporcionada por JavaScript: cuánto se ha desplazado la página.
Así que dejemos eso fuera del camino. Con una sola línea de JavaScript, podemos establecer una propiedad personalizada de CSS que conoce el porcentaje de la página desplazada:
window.addEventListener('scroll', () => ( document.body.style.setProperty('--scroll',window.pageYOffset / (document.body.offsetHeight - window.innerHeight)); ), false);Ahora tenemos --scrollcomo valor que podemos usar en el CSS.
¡Este truco viene de Scott Kellum, que es todo un maestro de los trucos CSS!
Configuremos una animación sin usar ese valor al principio. Esta es una animación giratoria simple para un elemento SVG que girará y girará para siempre:
svg ( display: inline-block; animation: rotate 1s linear infinite; ) @keyframes rotate ( to ( transform: rotate(360deg); ) )¡Aquí viene el truco! Ahora pausemos esta animación. En lugar de animarlo durante un período de tiempo, lo animaremos a través de la posición de desplazamiento ajustando a animation-delaymedida que se desplaza la página. Si animation-durationes 1, eso significa desplazarse por toda la página. es una iteración de la animación.
svg ( position: fixed; /* make sure it stays put so we can see it! */ animation: rotate 1s linear infinite; animation-play-state: paused; animation-delay: calc(var(--scroll) * -1s); ) Intente cambiar el animation-durationa 0.5s. Eso permite que dos animaciones se puedan completar con las animation-delaymatemáticas.
Scott señaló en su demostración original que también establece:
animation-iteration-count: 1; animation-fill-mode: both;Contabilizó algunas rarezas de "rebasamiento" y puedo dar fe de que también lo he visto, particularmente en ventanas de visualización cortas, por lo que vale la pena configurarlas también.
Scott también estableció las propiedades de animación relacionadas con el desplazamiento en :root ()sí mismo, lo que significa que podría controlar todas las animaciones en la página a la vez. Aquí está su demostración que controla tres animaciones simultáneamente: