Categoria

scroll-snap

3 articoli associati a questo tag.

28 settembre 2026

Carousel in puro CSS: scroll-snap, pulsanti e marker nativi (senza JavaScript)

Un carosello, a ben vedere, è “solo” uno scroller ben progettato: contenuto che scorre, si aggancia a step precisi e offre controlli per navigare. Oggi CSS mette a disposizione una serie di primitive dedicate che permettono di costruire carousel completi senza JavaScript: scroll-snap per la base, ::scroll-button per i pulsanti, ::scroll-marker e scroll-marker-group per i pallini, :target-current per lo stato attivo e scroll-target-group per indicatori completamente custom (e persino uno scroll-spy in due righe).

22 settembre 2026

Swipe to remove sul web moderno: un’implementazione fluida con Scroll Snap, Intersection Observer e Web Animations

Implementare lo swipe-to-remove sul web può diventare rapidamente un groviglio di gesture, calcoli e animazioni poco fluide. In questo articolo vediamo un approccio moderno basato su tecnologie native: CSS Scroll Snap per la meccanica del gesto, Intersection Observer per determinare la soglia di “rimozione”, e Web Animations per transizioni coerenti e performanti. Con note pratiche su compatibilità e fallback.

29 aprile 2026

3 pattern CSS per layout moderni (più due “boost” estetici)

Tre pattern CSS pratici che tornano utili nei layout reali: uno scroller orizzontale a card con Grid + scroll-snap, una auto-grid robusta con minmax che evita overflow sui viewport stretti, e un pattern “adaptive” con container query perfetto per sidebar e moduli riusabili. In chiusura: corner-shape per angoli “scooped” e un’idea per rendere più soddisfacente lo scorrimento con animazioni guidate dallo scroll (progressive enhancement).