Tuesday.css este cea mai tare bibliotecă de animație chiar acum
Până acum ar trebui să fiți deja familiarizați cu Animate.css la fel de biblioteca principală de animație printre designeri web.
Dar există un nou copil pe blocul numit marţi, si este luând prin forță animația web.
Această bibliotecă nouă nu are un ansamblu diferit în format sau în implementare. Dar marți vine cu o mână de noi animații CSS că tu nu poate găsi în altă parte.
Aceste noi efecte sunt mult mai subtil în natură așa că într-adevăr amestecați într-o pagină frumos. Iată a lista mică a efectelor puteți alege de la:
- Se estompează și se extinde
- Fade & psihiatru
- Ștergeți și săriți
- Unghiul înclinat
- Treceți din stânga / dreapta
- Squash / întindere
- Balama
Dacă treceți prin această listă pe pagina demo, veți observa că toate efectele au un lucru în comun: fizica.
Toți se simt foarte bine realist la elementele de bază ale fizicii, și par să respectați legile gravitației. Nici una dintre aceste animații nu este peste cap sau străină. sunt subtil, dar notabil și, mai important, sunt de crezut.
Cred că marți este una dintre cele mai bune biblioteci moderne de animație CSS pentru că prezintă o imagine realistă a animației web.
Nu ar trebui să proiectăm efecte de interfață nebune care apar ca un deget mare. Subtilitate este întotdeauna numele jocului pentru că este creează un sentiment de interactivitate de la orice intrare a utilizatorului, indiferent dacă este vorba de un clic sau de o parcurgere.
Problema a fost dintotdeauna de a scrie aceste animații de la zero și de a le face să arate doar dreptate. Dar acum, marți, grijile tale pot zbura chiar în ușă.
Doar descărcați o copie de la GitHub și adaugă .css fișier pe pagina dvs.. De fapt, puteți utilizați versiunea CDN direct de la GitHub dacă nu doriți să descărcați nimic local.
Odată ce acest lucru este adăugat la pagina dvs. web, doar adăugați .anima clasa împreună cu oricare dintre clasele de proprietate enumerate în repo GitHub. Codul dvs. ar putea arăta astfel:
Este marți.
Uitați-vă la documentația completă a vedea o listă a tuturor claselor de animație in / out.
Dacă lucrați cu JavaScript, puteți, de asemenea adăugați dinamic aceste clase la evenimentele cu click / hover. În acest fel, puteți adăuga clasa animat numai atunci când un utilizator dă clic pe un buton, care va părea animat la clic.
Există atât de multe lucruri pe care le puteți face marți, și este cu adevărat noul Animate.css pentru animații pragmatic de interfață.
Luați o privire la pagina demo pentru ao vedea live în acțiune și puteți afla mai multe prin citirea lor “în fabricație” post care vorbește despre modul în care a creat echipa Shakr marți.
