Rotella e trackpad
Un evento della rotella diventa un bersaglio verso cui la pagina si avvicina, invece di un salto: le pagine lunghe hanno finalmente un peso.
Sotto il cofano
Fluida come
la strada per Merzouga.
Questa pagina usa Lenis — la libreria open source che trasforma i balzi della rotella, del trackpad e del dito in uno scorrimento continuo, mentre le sezioni fisse, i link interni e l'impostazione di movimento ridotto restano dove il browser se li aspetta.
- Progresso
- 0.0%
- Velocità
- 0.00
- Direzione
- –
- Stato
- fermo
Lenis 1.3.26 · demo dal vivo
Scorrere per esplorare
Come funziona
Tre righe,
un viaggio fluido.
Aggiungi un foglio di stile e uno script differito prima del tuo, poi affida il volante a un unico costruttore. Lenis continua a usare la reale posizione di scorrimento del browser: cambia solo la velocità con cui la pagina ci arriva.
<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 });Tastiera e tocco
I gesti restano nativi, e Pagina giù, Inizio e la barra spaziatrice mantengono il loro comportamento, link interni compresi.
Il fisso resta fisso
Il binario della sezione successiva è un semplice position: sticky. Niente trucchi con transform, niente JavaScript di layout.
Un solo ciclo di frame
autoRaf esegue un unico requestAnimationFrame per tutta la pagina, e la geometria di questa demo viene misurata solo al ridimensionamento.
Il binario dei viaggi
Sei rotte,
un solo passaggio.
Sei itinerari reali dal nostro laboratorio di Merzouga. Su schermo largo il binario avanza con lo scorrimento verticale; su schermo stretto diventa una striscia che puoi scorrere con il dito.
Scorri il binario per vedere le rotte.
Profondità
Il primo piano si muove,
lo sfondo resta.
Un transform per frame, scritto solo mentre la sezione è visibile. L'immagine legge la sua posizione dalla geometria salvata al ridimensionamento, così lo scorrimento non chiede mai al browser di ricalcolare il layout.
I numeri
Economico da caricare,
ancora di più da eseguire.
5.4 kBruntime di Lenis compresso
513 Bil foglio di stile che porta
0cookie impostati da questa pagina
1un solo ciclo di frame
A te il turno
Prendi il volante.
Ogni comando qui sotto parla con la stessa istanza di Lenis che muove la pagina — quella esposta come window.lenisDemo nella console.
Scorrimento nativo.
Accesso
Lento è un'impostazione,
non un compromesso.
Movimento ridotto
Quando qualcuno chiede meno movimento, Lenis non viene nemmeno avviato: la pagina scorre in modo nativo, il binario diventa una striscia e la fotografia in parallax smette di muoversi.
Prima la tastiera
I link interni atterrano a cento pixel sotto l'intestazione fissa, il fuoco resta visibile e ogni comando di questa pagina è un vero pulsante.
Nessun vincolo
Se il CDN non risponde, la pagina continua a funzionare con lo scorrimento del browser: la demo si limita a riportare il fallback invece di fingere.
Il deserto ha pazienza
Chiedici tutto.
Niente tour, solo chiacchiere.
10+ anni a condividere il MaroccoGuide 100% localiRisposta di solito entro 2 ore