Rueda y trackpad
Un evento de rueda se convierte en un objetivo hacia el que la página se aproxima, en lugar de un salto: por fin las páginas largas pesan algo.
Bajo el capó
Suave como
el camino a Merzouga.
Esta página usa Lenis — la librería de código abierto que convierte el salto del ratón, el trackpad y el dedo en un desplazamiento continuo, mientras las secciones fijas, los enlaces internos y la preferencia de movimiento reducido siguen donde el navegador los espera.
- Progreso
- 0.0%
- Velocidad
- 0.00
- Dirección
- –
- Estado
- en reposo
Lenis 1.3.26 · demo en vivo
Desplázate para explorar
Cómo funciona
Tres líneas,
un viaje suave.
Añade una hoja de estilos y un script diferido antes del tuyo y entrega el volante a un único constructor. Lenis sigue usando la posición de desplazamiento real del navegador: solo cambia la velocidad a la que llega la página.
<link rel="stylesheet" href="https://unpkg.com/lenis@1.3.26/dist/lenis.css">
<script src="https://unpkg.com/lenis@1.3.26/dist/lenis.min.js" defer></script>
const lenis = new Lenis({ autoRaf: true, anchors: true });Táctil y teclado
Los deslizamientos siguen siendo nativos, y Avance de página, Inicio y la barra espaciadora conservan su comportamiento habitual, enlaces internos incluidos.
Lo fijo sigue fijo
El raíl de la sección siguiente es un position: sticky normal. Sin trucos de transform ni JavaScript de maquetación.
Un solo bucle de frames
autoRaf ejecuta un único requestAnimationFrame para toda la página, y la geometría de esta demo solo se mide al redimensionar.
El raíl de viajes
Seis rutas,
un solo barrido.
Seis itinerarios reales de nuestro taller de Merzouga. En pantalla ancha el raíl avanza con tu desplazamiento vertical; en pantalla estrecha se convierte en una tira que puedes deslizar.
Desliza el raíl para ver las rutas.
Profundidad
El primer plano se mueve,
el fondo espera.
Un transform por frame, escrito solo mientras la sección está en pantalla. La imagen lee su posición de la geometría guardada al redimensionar, así que desplazarse nunca le pide al navegador recalcular el maquetado.
Las cifras
Barato de cargar,
más barato aún de ejecutar.
5.4 kBruntime de Lenis comprimido
513 Bla hoja de estilos que trae
0cookies que fija esta página
1bucle de un solo frame
Ahora tú
Toma el volante.
Cada control de abajo habla con la misma instancia de Lenis que mueve la página — la que se expone como window.lenisDemo en la consola.
Desplazamiento nativo.
Acceso
Ir lento es una opción,
no un compromiso.
Movimiento reducido
Cuando alguien pide menos movimiento, Lenis ni se inicia: la página se desplaza de forma nativa, el raíl se convierte en una tira con el dedo y la fotografía en parallax deja de moverse.
Primero el teclado
Los enlaces internos aterrizan cien píxeles bajo la cabecera, el foco se ve siempre y cada control de esta página es un botón real.
Sin ataduras
Si el CDN no responde, la página sigue funcionando con el desplazamiento del propio navegador: la demo simplemente informa del cambio en lugar de fingir.
El desierto es paciente
Pregúntanos lo que sea.
Sin tours, solo charla.
10+ años compartiendo Marruecos100% guías localesSuele responder en menos de 2 horas