Les techniques de l’intégrateur : l’illustration animée en CSS #3

Troisième et article des techniques de l'intégrateur centré sur l'illustration animée en CSS. Au programme : une des animations les plus fluides et complexes que vous pourrez voir de votre vie : CSS Snow Fox

Illustrations animées en CSS : Tour des techniques les plus fréquentes

Cet article est la suite de l'article Nouvelle formule pour les inspirations pour intégrateurs #83 : Illustrations CSS. Si vous ne l'avez pas lu, allez donc y faire un petit tour avant de continuer cet article.

Tous les jeudis du mois de janvier, nous nous pencherons sur des exemples d'illustrations CSS à la difficulté croissante. Au programme d'aujourd'hui, le décryptage d'une des animations les plus complexes que j'ai pu voir jusque-là, un mignon renard des neiges de près de 900 lignes de CSS

Note : les décryptages sont dans l'ordre croissant de difficulté, et celui la est tout simplement le dernier de la serie. Si vous venez d'arriver et que vous ne connaissez pas le format, ou que vous avez déjà suivi tous les épisodes mais que vous n'êtes pas forcément encore très a l'aise avec l'illustration CSS, je vous conseille très fortement la (re)lecture des deux premiers articles d'explications.

 Les techniques de l'intégrateur : l'illustration animée en CSS #1

Les techniques de l'intégrateur : l'illustration animée en CSS #2

Maintenant que cela est dit, je tenais aussi à préciser que le gap de complexité entre la semaine dernière et cette semaine est tout simplement ENORME.

En clair, j'aurais pu tout à fait passer un mois sur ce petit renard tiré tout droit des enfers. N'hésitez donc pas à prendre le temps de bien lire le code source et faire vous aussi le travail de décryptage nécessaire à la compréhension. Cette tache vous demandera sans aucun doute du temps, mais vous apprendrez énormément en le faisant.

Notre sujet : CSS Snow Fox, de David Khourshid

Les decryptages fait dans cet articles seront tous tire du pen suivant, de David Khourshid.

See the Pen CSS Snow Fox by David Khourshid (@davidkpiano) on CodePen.

Comme vous pouvez le voir, le travail est saisissant de fluidité et de réalisme. Tout cela est obtenu grace à un magnifique travail au niveau des animations.

Nous allons passer rapidement sur l'aspect "illustration" du renard, vraiment très intéressante visuellement mais qui ne devrait pas vraiment trop vous poser de problèmes à l'exception de la queue, sur laquelle nous reviendrons. Pour simplifier l'analyse, j'ai mis un simple border sur tout les elements du pen.

See the Pen CSS Snow Fox by Benjamin SANCHEZ (@B_Sanchez) on CodePen

La majorité des éléments sont crées avec de simples boîtes aux bords arrondis. le corps est un rectangle arrondi, la queue c'est qu'un empilement de ronds, etc. Vous pourrez néanmoins observer que les pattes, le nez ou les oreilles par exemple sont étranges, avec le border qui n'est clairement pas au niveau du changement de couleur.

Cela démontre l'utilisation d'un box-shadow inner (une ombre interne) pour créer ces courbes. Pour plus d'informations sur ce sujet, je vous conseille la lecture d'un article que j'ai dédié au sujet : Focus sur la propriété CSS3 Box-Shadow. 

Les pattes avant

Attaquons-nous maintenant aux animations avec un assez gros morceau : les pattes. J'ai sélectionné une patte avant que j'ai découpé (aucun renard n'a été blessé dans l'opération, rassurez-vous), mais les pattes arrière fonctionnent de la même manière. Les 200 premières lignes composent la création graphique de cette patte, tout ce qui suit traite des animations

See the Pen CSS Snow Fox – legs by Benjamin SANCHEZ (@B_Sanchez) on CodePen.

Pour commencer, vous pouvez noter qu'il n'y a pas moins de 5 animations pour cette simple patte, rien que cela. Heureusement, elles sont toutes très simples prises séparément, et le simple fait de les avoir réunis au même endroit devrait vous permettre de les comprendre sans problème. Prenez quand même le temps des quoter pour les déquoter une à une et bien comprendre comment les mouvements sont associés, vous verrez c'est vraiment très intéressant.

Vous pourrez néanmoins noter la présence de deux animations étranges car n'ayant pas de @keyframes : log et log-inner. De plus, les animations ne sont pas presentees de manière normale, mais sous la forme ont(paw) par exemple. C'est car l'auteur à tir parti de la puissance de SCSS en créant une mixins et une boucle pour se simplifier la vie. Je ne rentrerais pas dans le detail car ce point à plus à voir avec les préprocesseurs qu'avec l'animation, mais je vous conseille tout de même d'y jeter un oeil en vous aidant de la page de documentation de sass.

La queue

Pour la queue, nous ne pourrons malheureusement pas vraiment faire une analyse complète, car ici aussi SCSS est exploité dans ses derniers retranchements, mais nous allons quand même voir quelques points.

See the Pen CSS Snow Fox – tail by Benjamin SANCHEZ (@B_Sanchez) on CodePen.

Tout d'abord, vous pouvez noter la présence de "tails" et de "tail2". Si vous essayez de les séparer (en les quottant par exemple) vous pouvez voir que la première est là pour apporter la "forme" et l'animation", alors que la deuxième est là pour donner de la rondeur et des détails.

See the Pen CSS Snow Fox – tail 1/2 by Benjamin SANCHEZ (@B_Sanchez) on CodePen.

See the Pen CSS Snow Fox – tail 2/2 by Benjamin SANCHEZ (@B_Sanchez) on CodePen.

Notez aussi le petit effet "triangle" sur la partie deux, qui est une utilisation astucieuse d'un background avec un gradient (un peu comme la pokeball de l'analyse de la semaine dernière)

Pour le reste, l'important est pour comprendre de bien analyser la mixin @mixin n-tail($n, $size: null, $prev: null, $rot: 0deg) que vous trouverez ligne 104. Je vous laisse le faire par vous-même pour l'instant, mais cette partie sera surement la cible d'un article à part entière parlant de la récursion dans le CSS.

Et le reste du corps ?

je n'ai pas grand-chose à dire sur le reste du corps, qui est composé d'un simple rectangle aux bords arrondis et de la tête qui a du demmander un peu de travail d'illustration.

Niveau illustration c'est très bon mais ça reste assez simple et compréhensible, vous ne devriez pas avoir de problèmes. Notez tout de même les différentes manières de créer des arrondis (bordé-radius, box-shadow inner, gradient) en fonction des endroits et des besoins en animation. 

Pour les animations justement, nous sommes principalement face à une petite transformation translate de l'oeil, donc rien que vous n'ayez déjà vu.

Conclusion

Nous en avons fini avec ce renard, mais je vous encourage encore une dernière fois à retourner lire les 900 lignes qui le composent. Maintenant que vous avec pu vous concentrer sur les détails, pour pourrez aussi avoir une meilleure vision d'ensemble.

Pour conclure sur ce sujet, je tenais à remercier les auteurs de tous les pens que j'ai étudie pendant ce mois pour leur travail inspirant et particulièrement intéressant. J'ai appris beaucoup en les analysant et j'espère que vous aussi.

See the Pen Alex the CSS Husky by David Khourshid (@davidkpiano) on CodePen.

Pour aller plus loin si le sujet vous intéresse, je vous propose de jeter un oeil sur l'article Le cercle comme base du design pour les logos et icônes, qui propose des exemples que vous pourrez recréer en CSS avec un petit peu de travail. Si vous le faite, n'hésitez pas à me prévenir en commentaire (en précisant votre pen et votre twitter éventuellement) et je vous mettrais en avant dans un article !