Tuesday.css è The Hottest Animation Library Right Now
Ormai dovresti già avere familiarità con Animate.css come la libreria di animazione principale tra i web designer.
Ma c'è un nuovo ragazzo nel blocco chiamato martedì, e la sua prendendo l'animazione web con la forza.
Questa nuova libreria non è molto diversa per formato o implementazione. Ma il martedì arriva con una manciata di nuove animazioni CSS che tu non riesco a trovare da nessun'altra parte.
Questi nuovi effetti sono molto più sottile in natura così loro davvero mescolarsi bene in una pagina. Ecco un piccola lista degli effetti puoi scegliere tra:
- Dissolvenza ed espansione
- Dissolvenza e restringimento
- Timbro giù e rimbalza
- Altalena ad angolo
- Entra da sinistra / destra
- Squash / stirata
- Cerniera
Se si passa attraverso questa lista sulla pagina demo noterete che tutti gli effetti hanno una cosa in comune: la fisica.
Si sentono tutti molto bene realistico alle basi della fisica, e loro sembrano rispettare le leggi di gravità. Nessuna di queste animazioni è esagerata o estranea. Sono sottile ma evidente e, cosa più importante, lo sono credibile.
Penso che martedì sia una delle migliori librerie di animazioni CSS moderne perché presenta una visione realistica dell'animazione web.
Non dovremmo progettare effetti di interfaccia pazzi che si distinguono come un pollice dolente. subtlety è sempre il nome del gioco perché questo crea un senso di interattività da qualsiasi input dell'utente sia che si tratti di un clic o di una pergamena.
Il problema è sempre stato scrivere queste animazioni da zero e farle sembrare giuste. Ma ora con Martedì le tue preoccupazioni possono volare proprio fuori dalla porta.
Appena scarica una copia da GitHub e Aggiungi il .css file alla tua pagina. Puoi davvero usa la versione di CDN direttamente da GitHub se non vuoi scaricare nulla localmente.
Una volta che questo viene aggiunto alla tua pagina web, solo aggiungere il .animare classe insieme a una qualsiasi delle classi proprietarie elencato nel repository GitHub. Il tuo codice potrebbe apparire in questo modo:
È martedì.
Dai un'occhiata al documentazione completa vedere un elenco di tutte le classi di animazione in / out.
Se lavori con JavaScript puoi anche aggiungi queste classi in modo dinamico sugli eventi click / hover. In questo modo puoi aggiungere la classe animata solo quando un utente fa clic su un pulsante, che sembrerà animare al clic.
C'è così tanto che puoi fare con Martedì, ed è davvero il nuovo Animate.css per le animazioni pragmatiche dell'interfaccia utente.
Dai un'occhiata al pagina demo vederlo vivere in azione, e puoi imparare di più leggendo attraverso il loro “durante lo sviluppo” inviare che parla di come il team Shakr ha creato martedì.
