Volver a los artículos
Cómo añadir un desplazamiento suave a la página web de webflow
Tutoriales

Cómo añadir un desplazamiento suave a la página web de webflow

Aprende a añadir un desplazamiento suave a tu sitio web, para un efecto moderno de tipo intertia.

Flowbase
25 de febrero de 2020

Webflow Smooth Scroll (luxy.js)

Luxy.js es un popular efecto de desplazamiento por inercia (también conocido como impulso) que hace que el desplazamiento de su sitio web se detenga gradualmente en lugar de detenerse inmediatamente. Esto puede ser utilizado para hacer que la experiencia de desplazamiento de sus sitios se sienta más suave y menos discordante. Y lo que es mejor, sólo hay que seguir tres pasos muy sencillos.

1. Añade el Script Luxy al código personalizado de tus sitios

En primer lugar, querrás añadir el siguiente script a tu página, o a la configuración del proyecto.



var isMobile = /iPhone|iPad|Android/i.test(navigator.userAgent);
if (!isMobile) {
     luxy.init({
       wrapper: '#luxy',
       wrapperSpeed: 0.065,
     
   });
}
Aumentar el valor en wrapperSpeed aumentará la velocidad de desplazamiento por inercia.
Añadir un script al cuerpo de una página

Añadir un script al pie de página de los proyectos

2. Añadir un div-block para envolver toda la página

Puedes llamarlo como quieras - para los propósitos de este ejemplo usaremos "Smooth Wrapper".

Envolver todo el contenido de las páginas en un bloque div llamado "Smooth Wrapper".
Los elementos con posicionamiento avanzado, como los elementos fijos y pegajosos, no funcionarán con este script si están dentro de la envoltura "Luxy". Tendrá que colocar esos elementos fuera de la envoltura luxy.

3. Dar a ese div un ID de luxy

El nombre correcto es importante aquí, porque el script buscará un div con el ID de "luxy".

Dando al div wrapper un ID de "luxy".

¡Eso es!

Tres pasos súper sencillos. 

Recuerde publicar y ver el sitio en vivo para ver su código personalizado en acción.

Esta guía utiliza luxy.js - puedes leer más sobre él aquí. Hay muchos otros plugins de efecto de desplazamiento inercial que se pueden utilizar. Echa un vistazo al proyecto CJHersh que compara seis plugins comunes utilizados para lograr el desplazamiento por inercia.


SOBRE EL AUTOR
Flowbase

Flowbase es la empresa líder en recursos de Webflow. Proporcionamos a los clientes una colección de recursos premium y gratuitos que les ayudan a crear mejores productos con Webflow.

¿Disfrutó de esta lectura?

Manténgase al día con las últimas noticias, estrategias e ideas sobre el negocio del vídeo enviadas directamente a su bandeja de entrada.

¡Gracias! Su presentación ha sido recibida!
¡Uy! Algo salió mal al enviar el formulario.

Recibe los recursos de la web directamente en tu buzón.

Inscríbete para recibir información semanal e inspiración en tu bandeja de entrada.

OTRAS GUÍAS Y LECCIONES

Impulsa más tu sitio web de flujo de datos.