Luo loputon vierivä karusellianimaatio, joka pysähtyy hover-tilassa käyttäen vain CSS:ää. Ei JavaScriptiä tarvitaan.
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:
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.
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.
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.
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! 🚀