Animaciones vinculadas a desplazamiento | Programar Plus

Te desplazas hacia abajo hasta cierto punto, ahora quieres darle estilo a las cosas de cierta manera. Un encabezado se vuelve fijo. Se dispara una animación. Aparece una tabla de contenido. Para hacer cualquier cosa en función de la posición de desplazamiento, se requiere JavaScript en este momento. Observa la posición de desplazamiento a través de un evento DOM y modifica el estilo de un elemento en función de esa posición. O, probablemente mejor si puede, utilice IntersectionObserver. Acabamos de escribir un blog sobre todo esto.

Ahora hay una nueva especificación (no oficial) que intenta llevar estas posibilidades a CSS. Me encanta cuando los estándares web se involucran porque ven a autores como nosotros tratando de lograr ciertos efectos de diseño y quieren (presumiblemente) ayudar a que sea más fácil y más eficiente. También me gusta cómo esta especificación enumera a los editores de Mozilla, Google y Apple.

Me pregunto cómo manejarán las cosas de bucle infinito aquí. Al igual que te desplazas a un punto, activa alguna animación, que mueve algún elemento de manera que cambia la posición de desplazamiento, que detiene la animación, que mueve la posición de desplazamiento de nuevo … etc. También me pregunto por qué todo es específico de la animación. El “estilo de la posición de desplazamiento” parece tener el mayor atractivo y nivel de utilidad de uso.

Enlace directo →

(Visited 5 times, 1 visits today)