it.hideout-lastation.com
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, alimentata da CSS .
Quella libreria libera è stata rilasciata da 720kb e ha visto rapidamente un'alternativa di follow-up chiamata Checkbox.css . Funziona in modo simile, tranne che per il ripristino e l'animazione delle caselle di controllo HTML .
Questa libreria si presenta come una suite di librerie con tre scopi distinti :Radiobox.css- animazioni radio personalizzateCheckbox.css- animazioni delle caselle di controllo personalizzateChecked.css: stili e animazioni di elementi selezionati esistenti (radio e caselle di controllo)
Questi sono tutti sviluppati dalla stessa squadra e funzionano in modo simile. Ma dovrai includere ogni 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 e transizioni CSS, a seconda del supporto del browser.
Nessuna di queste librerie viene fornita con metodi di fallback JS, quindi funzionano 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 uno).
Una volta che il foglio di stile CSS è sulla tua pagina, aggiungi una classe alla tua casella di controllo con la checkbox-x format checkbox-x dove "x" rappresenta l'animazione che desideri . Ad esempio, ecco il codice per l'effetto di animazione "jump":
La parte migliore è come questa libreria può funzionare anche in combinazione con il formato del pulsante radio . Consiglio vivamente la libreria Checked.css se si desidera animare gli elementi selezionati esistenti .
Non lasciare che tutte queste dipendenze ti spaventino. Praticamente chiunque può configurare la libreria Checkbox.css o una qualsiasi delle librerie correlate, tutto da zero con un po 'di 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_.
15+ Conferenze di sviluppo front-end per partecipare nel 2017
La stagione delle conferenze è alle porte, quindi ti presentiamo una guida al panorama della conferenza di sviluppo front-end del 2017. Tuttavia, ciò non significa essere una guida esauriente, soprattutto perché ci sono ancora un sacco di conferenze in cui gli organizzatori non hanno ancora confermato la posizione e / o la data, e ci sono anche molte conferenze importanti in altre lingue oltre all'inglese.Si
Crea barre di avanzamento responsive personalizzate con ProgressBar.js
Le barre di avanzamento sono ampiamente conosciute dalla maggior parte degli utenti sul web. Per gli sviluppatori, è spesso un processo complicato creare una barra di avanzamento da zero . Ma con ProgressBar.js non devi!Questa libreria open source gratuita non ha dipendenze e supporta tutti i principali browser, tra cui IE9 +.
