Share
CodePen è un ottimo posto per trovare ispirazione e vedere quali esperimenti UI pazzi gli altri stanno arrivando. Oltre a questo, è anche un posto utile per trovare contenuti educativi. In questo riepilogo esploreremo alcuni interessanti esempi di CodePens che ci insegnano tutto sull'animazione web.
Questo CodePen illustra come i browser leggono la sequenza di passaggi in a fotogramma chiave animazione.
Quando ci animiamo con i CSS, abbiamo una vasta gamma di proprietà da animare. Tuttavia, non tutti sono una buona idea. L'animazione delle proprietà sbagliate può creare animazioni lente e janky. Questo esempio di Ian Hazelton spiega come funzionano le quattro proprietà più efficienti.
A volte un semplice esempio è tutto ciò di cui hai bisogno. Questo esempio mostra come a partire dal e a la sintassi può essere utilizzata in un semplice keyframe.
In questa demo di JavaScript di Matt West, guarda come requestAnimationFrame Le API possono essere utilizzate per giocare e mettere in pausa.
Un grande uso di commenti in linea che dimostrano come creare due grafici animati usando ChartJS.
Una guida ben commentata sull'utilizzo di Canvas, di Petr Tichy.
A volte non hai bisogno di una GIF renderizzata per ottenere un effetto di animazione di fantasia. Questi esempi solo CSS di Joey Cheng sono un utile esempio di ciò che è possibile.
Chris Coyier dimostra come usare SVG animateTransform.
Spesso è utile sapere quando un'animazione è terminata. Questa semplice demo mostra come possiamo usare JavaScript per dire quando termina un'animazione.
Un altro grande segnalibro: questo esempio mostra come possiamo cambiare le animazioni usando media interrogazioni. Ridimensiona lo schermo per vedere l'effetto!
Infine, diamo un'occhiata al futuro dell'animazione SVG con questa demo che mostra come movimento-path la proprietà ci consente di creare complessi percorsi di movimento per le nostre animazioni.
Queste sono solo una manciata di demo, blog e procedure dettagliate disponibili su CodePen. CodePen non è semplicemente fantastico per l'animazione; prova a cercare e troverai tutti i tipi di fantastiche informazioni e demo che coprono tutti i tipi di argomenti di sviluppo web. Esplora, impara e divertiti!
Accentsconagua