Tuesday.css er The Hottest Animation Library akkurat nå
Nå bør du allerede være kjent med Animate.css som det primære animasjonsbiblioteket blant webdesignere.
Men det er et nytt barn på blokken som heter tirsdag, og dets tar web animasjon med makt.
Dette nye biblioteket er ikke helt annerledes i format eller implementering. Men tirsdag kommer med en håndfull nye CSS animasjoner som du kan ikke finne noe annet sted.
Disse nye effektene er mye mer subtil i naturen så de virkelig bland inn på en side pent. Her er en liten liste over effektene du kan velge fra:
- Fade og utvide
- Fade og krympe
- Stempel ned og sprette
- Vinklet sving
- Slå inn fra venstre / høyre
- Squash / stretch
- Hengsel
Hvis du går gjennom denne listen på demoversiden, vil du legge merke til at alle effektene har En ting til felles: fysikk.
De føler alle veldig realistisk til grunnleggende fysikk, og de synes å overholde tyngdekravene. Ingen av disse animasjonene er over-the-top eller utenom. de er subtil men merkbar og enda viktigere er de troverdig.
Jeg tror tirsdag er en av de beste moderne CSS animasjonsbiblioteker fordi den presenterer en realistisk visning av web animasjon.
Vi bør ikke designe gale grensesnitt effekter som skiller seg ut som en sår tommel. Diskresjon er alltid navnet på spillet fordi det skaper en følelse av interaktivitet fra hvilken som helst brukerinngang, enten det er et klikk eller en rulle.
Problemet har alltid vært å skrive disse animasjonene fra bunnen av og få dem til å se akkurat ut. Men nå med tirsdag kan dine bekymringer flyve rett ut døren.
Bare Last ned en kopi fra GitHub og Legg til .css filen til siden din. Du kan faktisk bruk CDN-versjonen direkte fra GitHub hvis du ikke vil laste ned noe lokalt.
Når dette er lagt til på din nettside, bare legg til .animere klasse sammen med noen av proprietære klasser oppført i GitHub repo. Koden din kan se slik ut:
Det er tirsdag.
Ta en titt på full dokumentasjon å se en liste over alle inn / ut-animasjonsklassene.
Hvis du jobber med JavaScript, kan du også legg til disse klassene dynamisk på klikk / svever hendelser. På denne måten kan du bare legge til den animerte klassen når en bruker klikker på en knapp, som ser ut til å animere på klikk.
Det er så mye du kan gjøre med tirsdag, og det er virkelig den nye Animate.css for pragmatiske brukergrensesnitt.
Ta en titt på demo side å se det leve i aksjon, og du kan lære mer ved å lese gjennom deres “under produksjonen” post som snakker om hvordan Shakr laget laget tirsdag.
