Cómo utilizar el desplazamiento de locomotora para todo tipo de efectos de desplazamiento

Recientemente estaba buscando una manera de realizar efectos de desplazamiento en un proyecto y me topé con la biblioteca de desplazamiento de Locomotive . Le permite realizar una variedad de efectos de desplazamiento, como paralaje y activar/controlar animaciones en los puntos de desplazamiento.

También podría llamarla biblioteca de “desplazamiento suave”, pero no aprovecha el desplazamiento suave nativo ; hace todo lo contrario: virtualiza el desplazamiento y garantiza que siempre sea fluido. Probablemente podrías considerar este “scrolljacking”, así que si lo odias en general, es posible que lo odies, pero la investigación de UX parece bastante contradictoria sobre si es realmente malo o no. La página de inicio le dará una buena idea de cómo funciona y cómo se siente.

Veamos los conceptos básicos del uso de JavaScript de Locomotive-Scroll y cómo aprovecharlo para lograr experiencias de usuario agradables.

¿Qué es el desplazamiento de locomotora?

Esto es lo que dicen :

Locomotive scroll es una biblioteca de desplazamiento simple, construida como una capa encima del desplazamiento virtual de ayamflow, proporciona un desplazamiento suave con soporte para efectos de paralaje, alternancia de clases y activación de detectores de eventos cuando los elementos están en la ventana gráfica.

En otras palabras, detecta cuándo hay elementos en la ventana gráfica y luego altera transformlos valores de las propiedades CSS de esos elementos para crear efectos de desplazamiento.

A menudo, los efectos de desplazamiento se denominan paralaje, lo que significa que algunos elementos parecen estar en el fondo, lo que hace que parezcan moverse más lento que otros elementos que están más cerca del primer plano mientras se realiza el desplazamiento. Imagínese mirar por la ventana desde un automóvil en movimiento. Los árboles a lo lejos parecen pasar lentamente por donde pasa rápidamente la valla a lo largo del camino. Algo así como el efecto aquí en este bolígrafo de Sarah Drasner:

Así es como funciona

Locomotive Scroll funciona principalmente a través de atributos específicos en HTML. Los elementos con estos atributos activan detectores de eventos en JavaScript cuando están en la ventana gráfica y luego aplican transformvalores CSS como estilos en línea.

Hay dos atributos clave a los que recurrir siempre Locomotive:

• data-scroll: detecta si un elemento está o no en la ventana gráfica
• data-scroll-container: envuelve todo el contenido HTML que desea ver para desplazarse

Esto es de lo que estamos hablando cuando decimos que los transformvalores de propiedad se actualizan en HTML como estilos en línea.

vamos a configurar esto

Podemos usar la biblioteca directamente como scriptetiqueta si lo deseamos. Está en CDN, así como:

link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/locomotive-scroll@3.5.4/dist/locomotive-scroll.css" script src="https://cdn.jsdelivr.net/npm/locomotive-scroll@3.5.4/dist/locomotive-scroll.min.js"

Ahora buscamos el contenedor y lanzamos la biblioteca:

const scroller = new LocomotiveScroll({  el: document.querySelector('[data-scroll-container]'),  smooth: true});

La biblioteca también está en npm , por lo que podemos usarla de esa manera en nuestra compilación con el típico npm install locomotive-scroll, luego:

import LocomotiveScroll from 'locomotive-scroll';const scroll = new LocomotiveScroll();

Eso significa que también podríamos usarlos fuera de Skypack, como:

¡Eso es realmente todo lo que hay que hacer para configurar! Es bastante plug-and-play así.

Aquí hay unos ejemplos

Probablemente se te ocurran algunos casos de uso bastante interesantes para algo como esto, pero repasemos algunos ejemplos en los que podrías usar Locomotive Scroll.

Empecemos con este:

Ese HTML tiene todo tipo de data-atributos allí. Ya hemos visto data-scrolly data-scroll-container. Esto es lo que son el resto y lo que hacen:

• data-scroll-section: Define una sección desplazable. Para un mejor rendimiento, es una buena idea dividir las páginas en secciones.
• data-scroll-direction: Define la dirección vertical u horizontal en la que se mueve un elemento.
• data-scroll-speed: Especifica la velocidad a la que se mueve un elemento. Un valor negativo invierte la dirección, pero sólo verticalmente, a menos que data-scroll-directionse aplique al mismo elemento.
• data-scroll-sticky: Especifica un elemento que se adhiere a la ventana gráfica mientras el elemento de destino todavía esté a la vista.
• data-scroll-target: apunta a un elemento en particular. Se necesita un selector de ID, que es único en comparación con los otros atributos.

Entonces, digamos que estamos usando el data-scroll-stickyatributo. Siempre tenemos que establecer data-scroll-targettambién un atributo, porque el elemento de destino suele ser el contenedor que contiene los otros elementos.

div data-scroll-section   p data-scroll data-scroll-sticky data-scroll-target="#stick"    Look at me, I'm going to stick when you scroll pass me.  /p/div

Ahora que hemos seleccionado uno, aquí hay un par más:

También puedes usar LocoMotive-Scroll en otros marcos. Aquí hay un ejemplo en React:

¡Desplácese a bordo!

No puedo enfatizar lo suficiente el poder de Locomotive Scroll. Necesitaba agregar efectos de desplazamiento a un proyecto paralelo en el que estaba trabajando, y fue súper rápido y fácil de usar. Espero que puedas usarlo en un proyecto y experimentar lo fantástico que es para los efectos de desplazamiento.