CS-endast oändlig rulllista-animation

Introduktion#

Vi älskar JavaScript, förstås. Men det är alltid kul att se vad vi kan uppnå bara med CSS - särskilt när det kommer till animationer, eftersom CSS-animationer ofta är "mindre tunga" än JavaScript-animationer.

I detta inlägg kommer jag att visa dig hur man skapar en oändlig rulllista-animation med paus vid svävningseffekt endast med CSS. Här är en förhandsvisning av vad vi ska bygga:

Skapa en rad av kort#

Först, låt oss skapa den grundläggande strukturen för vår karusell. Tänk på en rad av kort:

Ser bra ut, eller hur? Korten kan vara dina snygga banners, produktbilder eller vad som helst du vill visa upp i din karusell.

Duplicera korten#

Eftersom vi vill att karusellen ska vara oändlig, bör den vara kopplad från början till slut. Instinktivt kan vi försöka upprepa korten:

Titta på resultatet:

Endast den första uppsättningen av kort är synlig. Om du kontrollerar HTML, ser du att den andra uppsättningen av kort är dold och följer den första uppsättningen.

Animera karusellen#

Dags att animera karusellen! Eftersom vi har två uppsättningar av kort kopplade, kan vi animera karusellen genom att transformera kortgrupperna. Så här gör du:

Vi har fortfarande en sista touch att lägga till: att pausa animationen när man svävar över karusellen. Detta ger användarna en chans att se innehållet mer tydligt. Eftersom vi har två uppsättningar av kort, måste vi pausa båda grupperna när vi svävar över karusellen:

Det är allt! 🎊 Nu pausas karusellen när du svävar över den.

Slutliga tankar#

CSS är kraftfullt, och det är alltid kul att utforska vad vi kan uppnå med det. Det finns också andra CSS-egenskaper som scroll-snap-type och scroll-snap-align som kan hjälpa dig att skapa en interaktiv karusell. Lycka till med kodningen! 🚀