Vai al contenuto

Scroll evoluto con la proprietà CSS scroll-snap.

Scritto da:

carlopeluso

Partiamo dalla semplice osservazione che “Il fine dell’operazione di scroll è visualizzare uno specifico contenuto”. Nasce quindi l’esigenza di gestire il “target” dello scroll, ovvero il punto esatto di arrivo dell’operazione di scrolling (sia tramite touch sia tramite mouse).

Il seguente video fa vedere quanto sia vantaggioso “agganciare” (snap) lo scrolling ad un determinato contenuto (nell’esempio in basso è un semplice testo centrato su sfondo colorato), in modo che ad ogni scroll l’utente venga indirizzato al contenuto richiesto tramite effetto scivolo.

Questa operazione è fattibile tramite una nuovissima proprietà CSS3 chiamata scroll-snap.

scroll-snap-type: y mandatory;

Ciò significa che finalmente sarà possibile applicare questa funzionalità senza l’uso di Javascript o librerie esterne! solo una semplice riga CSS.

Ecco il codepen che puoi provare, sia da mobile che da desktop. Lo scroll è “forzato” in modo che il testo rimanga sempre centrale allo schermo.

Ecco una risorsa completa sull’argomento.

Articolo precedente

Prototipo di "Bubble menu" animato.

Articolo successivo

Esempio di animation-delay progressivo con LESS e SASS.

Unisciti alla discussione

Lascia un commento

Il tuo indirizzo email non sarà pubblicato.