Animazione di carosello a scorrimento infinito solo con CSS

Introduzione#

Noi amiamo JavaScript, ovviamente. Ma è sempre divertente vedere cosa possiamo ottenere solo con CSS, soprattutto quando si tratta di animazioni, poiché le animazioni CSS sono spesso "meno pesanti" rispetto a quelle realizzate con JavaScript.

In questo post, ti mostrerò come creare un' animazione di carosello a scorrimento infinito con effetto di pausa al passaggio del mouse usando solo CSS. Ecco un' anteprima di ciò che costruiremo:

Crea una fila di carte#

Innanzitutto, creiamo la struttura di base del nostro carosello. Considera una fila di carte:

Bello, vero? Le carte possono essere i tuoi banner eleganti, immagini di prodotto o qualsiasi cosa tu voglia mostrare nel tuo carosello.

Duplica le carte#

Poiché vogliamo che il carosello sia infinito, dovrebbe essere collegato end-to-end. Istintivamente, possiamo provare a ripetere le carte:

Guarda il risultato:

Solo il primo set di carte è visibile. Se controlli l' HTML, vedrai che il secondo set di carte è nascosto e segue il primo set.

Anima il carosello#

È ora di animare il carosello! Poiché abbiamo due set di carte collegati, possiamo animare il carosello trasformando i gruppi di carte. Ecco come:

Ci resta un ultimo tocco da aggiungere: mettere in pausa l' animazione quando si passa il mouse sopra il carosello. Questo darà agli utenti la possibilità di vedere meglio il contenuto. Poiché abbiamo due set di carte, dobbiamo mettere in pausa entrambi i gruppi quando si passa il mouse sopra il carosello:

Ecco fatto! 🎊 Ora il carosello si metterà in pausa quando ci passerai sopra con il mouse.

Considerazioni finali#

CSS è potente, ed è sempre divertente esplorare cosa possiamo ottenere con esso. Ci sono anche altre proprietà CSS come scroll-snap-type e scroll-snap-align che possono aiutarti a creare un carosello interattivo. Buona codifica! 🚀