Style Your Own Ownbox Effetti di animazione con Checkbox.css
In un recente post ho trattato una divertente libreria di animazione per pulsanti radio personalizzati, alimentato da CSS.
Quella libreria libera è stata rilasciata da 720kb e rapidamente ha visto un alternativa di controllo chiamata Checkbox.css. Funziona in modo simile, tranne che ripristina e anima le caselle di controllo HTML.
Questa libreria si presenta come una suite di librerie con tre scopi distinti:
Radiobox.css- animazioni radio personalizzateCheckbox.css- animazioni personalizzate per le caselle di controlloChecked.css- stili e animano gli elementi selezionati esistenti (radio e caselle di controllo)
Questi sono tutti sviluppati dalla stessa squadra e funzionano in modo simile. Ma dovrai farlo includere ciascuna libreria singolarmente se vuoi ottenere tutti gli effetti.
Dai un'occhiata al Checkbox.css GitHub per vedere alcune di queste funzionalità e come funzionano. Per impostazione predefinita, si basano su Trasformazioni 2D con transizioni CSS, in base al supporto del browser.
Nessuna di queste librerie include i metodi di fallback JS, quindi sono davvero così funziona solo per animazioni basate su CSS. Ma una rapida occhiata alla pagina della demo dovrebbe farti felice di aggiungere queste animazioni alla tua pagina.
Il processo non potrebbe essere più semplice e richiede conoscenze di programmazione minime (anche se è sempre utile averne alcuni).
Una volta che il foglio di stile CSS è sulla tua pagina, aggiungi una classe alla tua casella di controllo con il formato casella-x dove il “X” rappresenta qualsiasi animazione tu voglia. Ad esempio, ecco il codice per il “saltare” effetto animazione:
La parte migliore è come questa libreria può lavorare in combinazione con il formato del pulsante radio, pure. Consiglio vivamente la libreria Checked.css se lo desideri animare gli elementi selezionati esistenti.
Non lasciare che tutte queste dipendenze ti spaventino. Praticamente chiunque può impostare la libreria Checkbox.css o una delle librerie correlate, tutto da zero con una piccola copia e incolla.
E, se hai domande o suggerimenti per questo pacchetto di librerie di animazioni di input, prova a inviare messaggi ai creatori attraverso il loro sito o su Twitter @ 720kb_.
