Wicked CSS - egy forró új animációs könyvtár a tiszta CSS3-ban
A CSS3-nak köszönhetően néhány őrült animációt készíthet az interneten. Ezek lehetnek minden böngészőben és oldalelemben dolgozhat a navigációs elemek, legördülő listák, lapok vezérlésére.
Valójában ezek a kódok is dinamikusan generálhatók animációs eszközökkel. De ezek teljesen korlátozottak a teljes körű animációs könyvtárhoz képest.
A Wicked CSS a legfrissebb könyvtára. Ez a korai szakaszra emlékeztet Animate.css, ami meglehetősen egyszerű és kezdetleges volt, mégis használhatnánk elég sok weboldalon.
Éljenek egy élő demó honlapjára, és az összes támogatott animáció listáját. A cikk írása óta számítok 24 teljes animációs stílus a dia és a forgatás között és pulzáló / pattogó hatások.
Ezek közül az animációk közül sokan egyszeri funkciók, amelyekkel egy elemet megtekinthet (vagy nem látható). Ez hasznos olyan oldalakhoz, amelyeknek bizonyos oldalelemeket célzó görgethető nézetekkel rendelkező animációi vannak.
De te is használja ezt az extra oldalak megjelenítéséhez (vagy elrejtéséhez) mint a legördülő menük, keresősávok, rejtett bejelentkezési formák vagy bármi más. Íme egy kis lista az animációk közül, melyeket a következők közül választhat:
- Ráz
- Nagyítás / kicsinyítés
- Csúsztassa fel / le
- Fade be / ki
- Bekapcsolás / kijelentkezés
- Bounce és pop
- Körforgás be / ki
Mindezek az animációs stílusok egyetlen használatra készültek. Ezek oldalanként és elemenként többször is hívhatók, de ezek nem ismétlődő animációk.
Ehelyett ezeket a felhasználók kattintási, lebegési vagy húzási hatásai alapján fogják használni. Ezeket a CTA gomboknál is használhatjuk pulzáló / lüktető hatásokhoz, de ehhez JavaScript időzítési funkcióra van szükség.
Nézze meg az élő előnézeti példák és néhány további részletet. A GitHub repo és a GitHub repo mellett megtalálható a teljes dokumentáció is.
A Wicked CSS egy újabb könyvtár, így még nincs hatalmas követése. De a könyvtár stabil, és valószínűleg az elkövetkező évek körül lesz.
