Una descripción general de las tecnologías de desplazamiento

1. Tecnologías para comportamientos específicos relacionados con el desplazamiento
2. Tecnologías para comportamientos de desplazamiento genéricos
3. Herramientas para crear comportamientos de desplazamiento genéricos
4. In summary

Las animaciones relacionadas con el desplazamiento se han utilizado en la web durante años. En los últimos años, han comenzado a volverse más comunes, quizás en parte debido a que los dispositivos tienen un mayor rendimiento y, por lo tanto, pueden manejar más animaciones.

Existen varias tecnologías relacionadas con el desplazamiento, por lo que el objetivo de este artículo es brindar una descripción general de ellas y herramientas para ayudarlo a elegir la adecuada para usted. Yo diría que estas tecnologías se pueden dividir en dos categorías amplias: unas para comportamientos específicos relacionados con el desplazamiento y otras para comportamientos más genéricos relacionados con el desplazamiento .

Tecnologías para comportamientos específicos relacionados con el desplazamiento

Hay algunos efectos de desplazamiento CSS nativos simples que son compatibles con los navegadores modernos. En algunos casos de uso limitado, pueden ser suficientes para sus necesidades de animación de desplazamiento.

position: sticky;

Si todo lo que necesita es que un elemento permanezca en el mismo lugar al desplazarse durante una parte de la página, usar position: stickyes una buena opción. Es sencillo y está integrado en los navegadores modernos. Dicho esto, se requiere un polyfill para la compatibilidad con IE y algunos navegadores móviles. Para obtener una descripción general sólida, consulte este artículo de Preethi.

paralaje CSS

Esto no es tanto una tecnología como una técnica, pero es bastante útil para efectos de paralaje simples en los que desea que diferentes partes de la página se muevan a diferentes velocidades al desplazarse. Hay un buen artículo sobre la técnica en DigitalOcean y un montón de ejemplos en CodePen, como este encabezado de Firewatch . La mayor desventaja para mí es que es difícil entender qué valores usar para establecer la perspectiva y las transformaciones para lograr el efecto de paralaje exactamente correcto.

Puntos de ajuste de desplazamiento CSS

Los puntos de ajuste de desplazamiento permiten que el navegador se ajuste a posiciones de desplazamiento particulares que usted establece después de que un usuario termina con su desplazamiento normal. Esto puede resultar útil para mantener ciertos elementos a la vista. Sin embargo, la API aún está en proceso de cambio , así que tenga cuidado al utilizar la API más actualizada y tenga cuidado al confiar en ella en producción. Este artículo de CSS-Tricks de Max Kohler es un buen lugar para aprender sobre esto ahora mismo.

Desplazamiento suave

El desplazamiento suave se admite de forma nativa al saltar de una sección a otra dentro de una página usando window.scrollTo()JavaScript o incluso la scroll-behaviorpropiedad en CSS. El desplazamiento suave genérico que suaviza las acciones de la rueda del mouse no es compatible de forma nativa con todos los navegadores en este momento. Hay varias bibliotecas de JavaScript que intentan agregar soporte de desplazamiento suave para la acción de la rueda del mouse, pero todavía tengo que encontrar una que esté libre de errores y funcione bien con todas las demás tecnologías de desplazamiento. Además, el desplazamiento fluido no siempre es bueno en primer lugar .

Tecnologías para comportamientos de desplazamiento genéricos

Actualmente, no hay forma de crear o activar animaciones genéricas basadas en la posición de desplazamiento usando solo CSS (aunque existe una propuesta que podría admitir alguna forma de animaciones genéricas basadas en desplazamiento en CSS en un futuro lejano) o de desplazarse por parte de un animación. Como tal, si desea animar elementos al desplazarse, necesitará usar al menos algo de JavaScript para crear el efecto que desea. Hay dos métodos generales para usar JavaScript para activar animaciones en el desplazamiento: usar observadores de intersección y usar el scrollevento .

IntersectionObserver

Los observadores de intersecciones son excelentes si todo lo que necesita para su animación es información relacionada con si un elemento es visible o no en la ventana gráfica y en qué medida. Esto los convierte en una buena opción para animaciones reveladoras. Incluso entonces, algunas cosas son difíciles (aunque no imposibles) al usar observadores de intersecciones, como disparar diferentes animaciones dependiendo de la dirección en la que un elemento ingresa a la ventana gráfica. Los observadores de intersección tampoco son muy útiles si desea realizar animaciones de desplazamiento cuando un elemento está en el medio y no se superpone con los puntos inicial y final.

Usando el scrollevento

El uso del evento de desplazamiento le brindará mayor libertad para controlar las animaciones en el desplazamiento. Le permite afectar un elemento en el desplazamiento sin importar dónde se encuentre en términos de la ventana gráfica y configurar los puntos de inicio y finalización exactamente como lo necesita para su proyecto.

Dicho esto, también puede ser intenso en el rendimiento si no se acelera correctamente y no tiene una API conveniente para crear comportamientos particulares. Es por eso que a menudo es útil utilizar una buena biblioteca de desplazamiento que pueda manejar la limitación por usted y brindarle una API más útil con la que trabajar. ¡Algunos incluso pueden manejar muchos de los problemas de cambio de tamaño por usted! Literatura y libros

Herramientas para crear comportamientos de desplazamiento genéricos

Existen algunas bibliotecas de desplazamiento holísticas que intentan brindarle control total sobre las animaciones en desplazamiento sin que usted tenga que realizar todos los cálculos usted mismo.

DesplazamientoMagia

ScrollMagic provides a relatively simple API to create various effects on scroll and can be hooked into different animation libraries like GSAP and Velocity.js. However, it has become less maintained over the past few years, which lead to the creation of ScrollScene.

ScrollScene

ScrollScene is essentially a wrapper to try and make ScrollMagic and/or the intersection observer more usable. It uses a custom, more maintained version of ScrollMagic and adds additional features like video playback, scene init breakpoints, and scene duration breakpoints. It also makes use of GSAP.

ScrollTrigger

ScrollTrigger is an official GreenSock plugin for GSAP. It has a long list of features and has the most easy to use API of any scroll library(at least to me). Using it, you can have complete control to define where your scroll animations start and end, animate anything (WebGL, canvas, SVG, DOM, whatever) on scroll, pin elements in place while the animation is running, and more. You can even hook it up to smooth scrolling libraries and they will work great together. Plus it has the support of GreenSock and the GreenSock forums.

Notable mention: Locomotive Scroll

While it doesn’t attempt to be as comprehensive of a scrolling library as the other libraries mentioned above, Locomotive Scroll is focused on providing custom smooth scrolling. You can also animate certain properties of DOM objects by adding data attributes or hook into the onscroll event to animate other types of objects.

In summary

For some particular scroll animation effects, like sticky positioning and parallax, CSS technologies may be sufficient, at least when using a polyfill for browsers that don’t support those properties.

I generally recommend using GSAP’s ScrollTrigger because it can do everything that CSS properties can do, plus much more. ScrollTrigger will handle the browser support and calculations so that you can focus on animating!

Here’s a table covering which tools you can use to create particular effects:

Here’s a table comparing various other aspects of scroll technology:

Tal vez te puede interesar:

1. La innovación no puede mantener la Web rápida
2. Rendimiento web ultrarrápido
3. Tabla de contenidos fijos con estados activos de desplazamiento
4. “cambiar tamaño: ninguno;” en áreas de texto es una mala experiencia de usuario

Una descripción general de las tecnologías de desplazamiento

Tecnologías para comportamientos específicos relacionados con el desplazamientoTecnologías para comportamientos de desplazamiento genéricosHerramientas par

programar

es

https://aprendeprogramando.es/static/images/programar-una-descripcion-general-de-las-tecnologias-de-desplazamiento-1546-0.jpg

2024-09-30

Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente