Tuesday.css er det hotteste animationsbibliotek lige nu
Nu skal du allerede være bekendt med Animate.css som det primære animationsbibliotek blandt webdesignere.
Men der er et nyt barn på den nævnte blok tirsdag, ogdet er tager web animation med magt.
Dette nye bibliotek er ikke meget forskelligt i format eller implementering. Men tirsdag kommer med en håndfuld af nye CSS animationer at du kan ikke finde andre steder.
Disse nye effekter er meget mere subtil i naturen så de virkelig blend ind i en side pænt. Her er en lille liste over virkningerne du kan vælge fra:
- Fade & expand
- Fade & shrink
- Frimærke ned og hoppe
- Vinklet sving
- Indtast fra venstre / højre
- Squash / stretch
- Hængsel
Hvis du går gennem denne liste på demosiden, vil du bemærke, at alle effekterne har En ting til fælles: fysik.
De føler alle meget realistisk for det grundlæggende i fysikken, og de synes at overholde tyngdekravets love. Ingen af disse animationer er over-the-top eller udenfor. De er subtile endnu mærkbar og vigtigere er de troværdig.
Jeg tror, at tirsdag er en af de bedste moderne CSS animationsbiblioteker, fordi den præsenterer et realistisk billede af web animation.
Vi bør ikke designe gale interface effekter, der skiller sig ud som en øm tommelfinger. Raffinement er altid navnet på spillet fordi det skaber en følelse af interaktivitet fra enhver brugerindgang, om det er et klik eller en rulle.
Problemet har altid været at skrive disse animationer fra bunden og få dem til at se lige ud. Men nu med tirsdag kan dine bekymringer flyve lige ud af døren.
Lige download en kopi fra GitHub og tilføj .css fil til din side. Du kan faktisk brug CDN-versionen direkte fra GitHub hvis du ikke vil downloade noget lokalt.
Når dette er tilføjet til din webside, bare tilføj den .animere klasse sammen med nogen af de proprietære klasser opført i GitHub repo. Din kode kan se sådan ud:
Det er tirsdag.
Tag et kig på fuld dokumentation at se en liste over alle in / ud animationsklasserne.
Hvis du arbejder med JavaScript, kan du også Tilføj disse klasser dynamisk på click / hover events. På den måde kan du kun føje den animerede klasse, når en bruger klikker på en knap, som ser ud til at animere på klik.
Der er så meget du kan gøre med tirsdag, og det er virkelig den nye Animate.css for pragmatiske brugergrænseflader.
Tag et kig på demo side at se det leve i aktion, og du kan lære mere ved at læse gennem deres “Ved at blive lavet” stolpe som fortæller om, hvordan Shakr holdet skabte tirsdag.
