Descripción general de la tecnología de desplazamiento

Las animaciones relacionadas con el desplazamiento de páginas web han existido durante muchos años. Recientemente, tales animaciones se han vuelto más comunes. Quizás esto se deba en parte al hecho de que los dispositivos que solían funcionar en Internet se han vuelto más potentes. Estos dispositivos son capaces de manejar y mostrar más efectos visuales que antes. Hay muchas tecnologías de desplazamiento. El propósito de este artículo es proporcionar una visión general de dichas tecnologías y herramientas que lo ayudarán a elegir y crear lo que necesita en cada situación específica. Yo dividiría las tecnologías de desplazamiento en dos amplias categorías. El primero incluye tecnologías para implementar mecanismos de desplazamiento específicos, y el segundo incluye tecnologías de desplazamiento de propósito general.

Tecnologías para implementar mecanismos de desplazamiento específicos

En CSS, hay algunos efectos de desplazamiento estándar simples admitidos por los navegadores modernos. En algunos casos, su aplicación puede ser suficiente para satisfacer las necesidades específicas de un proyecto.

▍ Posición de propiedad CSS: pegajosa

Si necesita un elemento para no desplazarse junto con el resto del contenido de la página, al diseñar este elemento, es suficiente para aplicar la propiedad position: sticky. Este es un truco simple y directo; su soporte está integrado en los navegadores modernos. Pero para que esto funcione en IE y en algunos navegadores móviles, necesita un polyfill. Si está interesado en este tema, eche un vistazo a este material.





El elemento azul "descansa" en la parte superior del contenedor y no se desplaza junto con otros elementos.



Aquí hay una demostración de dicho desplazamiento.

Efecto paralaje

El efecto de paralaje no es, más bien, una tecnología especial, sino una técnica especial. Pero, sea como fuere, este efecto puede ser muy útil en aquellos casos en que necesite desplazarse por diferentes partes de la página a diferentes velocidades. Esta técnica está bien descrita en este material. Hay muchos ejemplos de su implementación. Por ejemplo, este . Para mí, la principal desventaja de esta técnica es que es difícil entender qué valores que dan el efecto de paralaje correcto deberían usarse para establecer perspectivas y transformaciones.





Efecto de paralaje: los elementos se mueven a diferentes velocidades.



Aquí hay una demostración del efecto de paralaje.

▍ Desplazarse con el ancla a puntos específicos

El uso de desplazamiento con puntos de anclaje permite al navegador ajustar automáticamente la posición de los elementos moviéndolos a una posición específica después de que el usuario haya completado la operación de desplazamiento normal. Esto puede ser útil en los casos en que es necesario que después del final del desplazamiento, cierto elemento esté completamente en el campo de visión del usuario. Sin embargo, la API todavía es inestable , por lo tanto, intente usar las implementaciones más recientes y tenga cuidado al usar este enfoque para desplazarse en la producción. Aquí hay un buen artículo sobre el tema.





Si el usuario desplaza el contenido para mover el elemento más allá del borde superior del contenedor, el navegador cambiará automáticamente la posición del elemento para que sea visible en su totalidad.



Aquí hay una demostración de desplazamiento con puntos de anclaje.

▍Desplazamiento suave

El navegador admite el desplazamiento suave cuando se desplaza la página a una sección específica utilizando el método window.scrollTo () en JavaScript, o incluso utilizando la propiedad CSS de comportamiento de desplazamiento . Actualmente, se requieren bibliotecas JavaScript especiales para implementar un desplazamiento suave con suavizado de los movimientos de la rueda del mouse. Pero al usar dichas bibliotecas, debe garantizar su interacción normal con otras tecnologías de desplazamiento. Además, el uso de desplazamiento suave no siempre es una buena idea.

Tecnologías de desplazamiento general

Actualmente no existe una forma exclusiva de CSS para activar animaciones de desplazamiento de propósito general basadas en la posición de desplazamiento (aunque existe una propuesta de que podríamos tener algunas animaciones de desplazamiento de propósito general a nuestra disposición en un futuro lejano) ... Como resultado, si desea animar elementos a medida que se desplazan, debe usar al menos un código JavaScript para lograr el efecto deseado. Hay dos métodos para usar JavaScript para animar elementos durante el desplazamiento. El primero es usar la API Intersection Observer, el segundo es manejar el evento scroll.

▍Uso de la API de Intersection Observer

La API IntersectionObserver le permite resolver con éxito varias tareas relacionadas con el desplazamiento, si todo lo que necesita para comenzar la animación es saber si un elemento está visible en la ventana gráfica, así como qué parte del elemento está visible . Esto hace que la API IntersectionObserver sea una gran herramienta para activar animaciones que acompañan la aparición de un elemento en la pantalla. Pero, aun así, algunos efectos son muy difíciles (aunque posibles) de implementar con esta API. Por ejemplo, este es el lanzamiento de diferentes animaciones dependiendo de la dirección del movimiento de un elemento. Esta API, además, no es particularmente útil en una situación en la que, al desplazarse, debe comenzar la animación cuando el elemento está en algún lugar en el medio de la ventana gráfica, es decir, no aparece en la ventana gráfica y no desaparece de ella.

▍Uso del evento de desplazamiento

Para aquellos que, para la implementación de la animación durante el desplazamiento, utilizan el evento scroll, hay grandes oportunidades. Esta técnica permite, al desplazarse, afectar el elemento en cualquier posición del elemento en relación con los bordes de la ventana gráfica. Usando el evento scroll, puede establecer con precisión, de acuerdo con las necesidades del proyecto, la posición del comienzo y el final de la animación.



Dado esto, debe tenerse en cuenta que este enfoque para el desplazamiento de la animación puede crear una carga considerable en el sistema. Esto sucede si al desarrollador no le importa el rendimiento y no limita la frecuencia del procesamiento de eventos scroll. Además, a disposición del programador que decide utilizar el evento.scroll, no habrá una API conveniente que le permita implementar varios escenarios de desplazamiento. Es por eso que a menudo, en lugar de implementar mecanismos de manejo de eventos scrollusted mismo, tiene sentido usar una biblioteca especializada, cuyos autores ya se han ocupado del impacto en el scrollrendimiento del manejo de eventos y la API. Algunas de estas bibliotecas incluso pueden ayudar al desarrollador cuando hay problemas con el tamaño de los elementos.

Herramientas de desplazamiento de uso general

Hay varias bibliotecas de desplazamiento potentes que tienen como objetivo proporcionar al desarrollador un control completo sobre las animaciones realizadas al desplazarse por las páginas, así como facilitarle la vida al desarrollador sin obligarlo a hacer cálculos complejos él mismo.

▍ScrollMagic

La biblioteca ScrollMagic nos brinda una API relativamente simple que nos permite crear varios efectos de desplazamiento. Esta biblioteca puede funcionar con varias bibliotecas de animación como GSAP y Velocity.js . Es cierto que en los últimos años esta biblioteca no está bien soportada. Esto condujo a la creación de la biblioteca ScrollScene.

▍ScrollScene

ScrollScene es, en esencia, un contenedor que tiene como objetivo aumentar la usabilidad de la biblioteca ScrollMagic y / o la API IntersectionObserver. Utiliza su propia versión de ScrollMagic, que tiene mejor soporte que la biblioteca normal. Hay características adicionales como reproducir video y puntos de apoyo que afectan la animación. Además, esta biblioteca usa GSAP.

▍ScrollTrigger

La biblioteca ScrollTrigger es el complemento oficial de GreenSock para GSAP. Esta biblioteca tiene un gran conjunto de características, su API me parece ser la API más simple de las bibliotecas de desplazamiento existentes. Con esta biblioteca, tiene control total sobre dónde comienza y termina la animación de desplazamiento, puede animar todo lo que desee mientras se desplaza (WebGL, lienzo, SVG, DOM), puede anclar elementos mientras se ejecuta la animación. Las capacidades de esta biblioteca no se limitan a esto. GreenSock también es compatible con esta biblioteca, y puede obtener ayuda para usarla en los foros de GreenSock.

▍Biblioteca digna de mención: Pergamino locomotor

La biblioteca Locomotive Scroll no se esfuerza por proporcionar un conjunto de características tan amplio como las otras bibliotecas que hemos discutido. Su objetivo principal es la implementación de desplazamiento suave. Al usarlo, además, puede animar algunas propiedades de los objetos DOM usando atributos data-*, o usar el controlador onscrollpara animar otros tipos de objetos.

Comparación de tecnologías y herramientas.

Aquí hay una comparación de las tecnologías de desplazamiento.





Aquí hay una comparación de las bibliotecas revisadas.

Salir

Para algunos mecanismos especiales de desplazamiento, como la fijación y el paralaje, las capacidades estándar de CSS pueden ser suficientes. Por lo menos, esto es cierto, siempre que use polyfills para navegadores que no admiten las funciones CSS correspondientes.



Por lo general, recomiendo usar la biblioteca ScrollTrigger para personalizar el desplazamiento. Le permite lograr todo lo que CSS puro es capaz de hacer, y mucho más. Esta biblioteca se encarga del soporte del navegador para ciertas tecnologías, hace que sea más fácil realizar cálculos, lo que permite a la persona que lo utiliza simplemente hacer sus negocios.



¿Qué tecnologías utiliza al configurar el desplazamiento en sus proyectos?