Recientemente estaba buscando una forma de realizar efectos de desplazamiento en un proyecto y me encontré con la biblioteca Locomotive Scroll. Le permite realizar una variedad de efectos de desplazamiento, como paralaje y activación / control de animaciones en los puntos de desplazamiento.
También puede llamarlo una biblioteca de “desplazamiento suave”, pero no aprovecha el desplazamiento suave nativo; hace todo lo contrario al virtualizar el desplazamiento y garantizar 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 mixta sobre si es realmente malo o no. La página de inicio le dará una buena idea de cómo funciona y se siente.
Veamos los conceptos básicos del uso de Locomotive-Scroll JavaScript y cómo aprovecharlo para disfrutar de experiencias de usuario agradables.
¿Qué es Locomotive Scroll?
Esto es lo que dicen:
El desplazamiento de locomotoras es una biblioteca de desplazamiento simple, construida como una capa sobre el desplazamiento virtual de ayamflow, proporciona un desplazamiento suave con soporte para efectos de paralaje, alternancia de clases y activación de oyentes 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 modifica CSS transform valores de propiedad en esos elementos para crear efectos de desplazamiento.
A menudo, los efectos de desplazamiento se denominan paralaje, lo que significa que algunos elementos están hechos para que parezca que están profundamente en el fondo, lo que hace que parezca que se mueven más lento que otros elementos que están más cerca del primer plano mientras se realiza el desplazamiento. Imagínese mirando por la ventana desde un automóvil en movimiento. Los árboles lejanos parecen pasar lentamente por donde la valla a lo largo de la carretera pasa rápidamente. Algo así como el efecto aquí en esta pluma de Sarah Drasner:
Así es como funciona
Locomotive Scroll funciona principalmente a través de atributos específicos en el HTML. Los elementos con estos atributos activan detectores de eventos en JavaScript cuando están en la ventana gráfica y luego aplican CSS transform valores como estilos en línea.
Hay dos atributos clave para invocar siempre a Locomotive:
data-scroll: detecta si un elemento está o no en la ventana gráficadata-scroll-container: envuelve todo el contenido HTML que desea ver para desplazarse
Esto es de lo que estamos hablando cuando decimos que el transform los valores de propiedad se actualizan en HTML como estilos en línea.
Observe cómo, tan pronto como un elemento con Locomotive’s data- atributos entra en la ventana gráfica, el CSS transform los valores se actualizan.
Vamos a configurar esto
Podemos usar la biblioteca como un <script> etiqueta si queremos. Está en CDN, así que:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/locomotive-scroll.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/locomotive-scroll.min.js">Ahora buscamos el contenedor e iniciamos 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 en lugar de la típica npm install locomotive-scroll, entonces:
import LocomotiveScroll from 'locomotive-scroll';
const scroll = new LocomotiveScroll();Eso significa que también podríamos usarlos en Skypack, como:
¡Eso es todo lo que hay que hacer en la configuración! Es bastante plug-and-play así.
Aquí hay unos ejemplos
Probablemente pueda pensar en algunos casos de uso bastante agradables para algo como esto, pero repasemos algunos ejemplos en los que podría usar Locomotive Scroll.
Empecemos por este:
Ese HTML tiene todo tipo de data- atributos que suceden allí. Ya hemos mirado data-scroll y 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 solo verticalmente, a menos quedata-scroll-directionse aplica sobre el mismo elemento.data-scroll-sticky: Especifica un elemento que se adhiere a la ventana gráfica siempre que el elemento de destino esté todavía a la vista.data-scroll-target: Apunta a un elemento en particular. Toma un selector de ID, que es único en comparación con los otros atributos.
Entonces, digamos que estamos usando el data-scroll-sticky atributo. Siempre tenemos que establecer un data-scroll-target atributo también, porque el elemento de destino suele ser el contenedor que contiene los otros elementos.
<div class="container" id="stick" 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 elegido uno aparte, aquí hay un par de otros:
También puede utilizar 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 esto fue súper rápido y fácil de usar. Espero que pueda usarlo en un proyecto y experimentar lo bueno que es para los efectos de desplazamiento.