Vain CSS: loputon vierivä karusellianimaatio

Johdanto#

Rakastamme JavaScriptiä, tietenkin. Mutta aina on hauskaa nähdä, mitä voimme saavuttaa pelkästään CSS:llä - erityisesti animaatioiden kohdalla, koska CSS-animaatiot ovat usein "vähemmän raskaita" kuin JavaScript-animaatiot.

Tässä artikkelissa näytän sinulle, miten luodaan loputon vierivä karusellianimaatio, joka pysähtyy hover-efektillä käyttäen vain CSS:ää. Tässä on esikatselu siitä, mitä olemme rakentamassa:

Luo korttirivi#

Aloitetaan luomalla karusellin perusrakenne. Mieti korttiriviä:

Näyttää hyvältä, eikö vain? Kortit voivat olla hienoja bannereitasi, tuotekuviasi tai mitä tahansa, mitä haluat esitellä karusellissasi.

Kaksinna kortit#

Koska haluamme karusellin olevan loputon, sen tulisi olla yhdistetty päistään. Vaistomaisesti voimme yrittää toistaa kortit:

Katso tulos:

Vain ensimmäinen korttisarja on näkyvillä. Jos tarkistat HTML:n, näet, että toinen korttisarja on piilossa ja seuraa ensimmäistä sarjaa.

Animaatio karusellille#

On aika animoida karuselli! Koska meillä on kaksi korttisarjaa yhdistettynä, voimme animoida karusellin muuntamalla korttiryhmiä. Tässä miten:

Meillä on vielä yksi viimeinen silaus lisättävänä: animaation pysäyttäminen, kun kohdistetaan karuselliin. Tämä antaa käyttäjille mahdollisuuden nähdä sisällön selkeämmin. Koska meillä on kaksi korttisarjaa, meidän on pysäytettävä molemmat ryhmät, kun kohdistetaan karuselliin:

Siinä kaikki! 🎊 Nyt karuselli pysähtyy, kun viet hiiren sen päälle.

Lopuksi#

CSS on voimakas, ja on aina hauskaa tutkia, mitä voimme saavuttaa sen avulla. On myös muita CSS-ominaisuuksia, kuten scroll-snap-type ja scroll-snap-align, jotka voivat auttaa sinua luomaan interaktiivisen karusellin. Iloista koodausta! 🚀