Share
CodePen est un excellent endroit pour trouver l'inspiration et voir les expériences loufoques d'interface utilisateur que d'autres sont en train de réaliser. En plus de cela, c'est aussi un endroit utile pour trouver du contenu éducatif. Dans cette synthèse, nous allons explorer quelques exemples intéressants de CodePens qui nous apprennent tout sur l'animation Web..
Ce CodePen illustre comment les navigateurs lisent la séquence d’étapes dans une image clé animation.
Lorsque nous animons avec CSS, nous avons une vaste gamme de propriétés à animer. Cependant, tous ne sont pas une bonne idée. L'animation des mauvaises propriétés peut générer des animations lentes et janky. Cet exemple de Ian Hazelton explique le fonctionnement des quatre propriétés les plus efficaces..
Parfois, un simple exemple suffit. Cet exemple montre comment le de et à la syntaxe peut être utilisée dans une image clé simple.
Dans cette démo JavaScript de Matt West, découvrez comment le requestAnimationFrame API peut être utilisé pour jouer et mettre en pause.
Une excellente utilisation des commentaires en ligne qui montrent comment créer deux graphiques animés à l'aide de ChartJS.
Un guide bien commenté sur l'utilisation de Canvas, par Petr Tichy.
Parfois, vous n'avez pas besoin d'un rendu GIF pour obtenir un effet d'animation sophistiqué. Ces exemples CSS de Joey Cheng sont un exemple utile de ce qui est possible..
Chris Coyier montre comment utiliser les SVG animateTransform.
Il est souvent utile de savoir quand une animation est terminée. Cette simple démonstration montre comment utiliser JavaScript pour indiquer la fin d'une animation.
Un autre excellent favori: cet exemple montre comment modifier des animations à l'aide de médias requêtes. Redimensionnez l'écran pour voir l'effet!
Enfin, jetons un coup d’œil sur l’avenir de l’animation SVG avec cette démo montrant comment le trajectoire la propriété nous permet de créer des chemins de mouvement complexes pour nos animations.
Ce ne sont là que quelques exemples de démos, de blogs et de procédures pas à pas disponibles sur CodePen. CodePen n'est pas seulement idéal pour l'animation; Essayez de chercher et vous trouverez toutes sortes d'excellentes informations et démos couvrant toutes sortes de sujets de développement Web. Explorez, apprenez et amusez-vous!
Accentsconagua