Animations successives
Ce test est une animation prévue pour être infinie, sans coupures et bien sur 100% responsive.
L'animation avait été créée dans le but initial de mettre en avant le bouton Contact sur l'ancien site de 16 Pixels. Comme la plupart des animations du site, nous nous étions bien sur tournés vers une implémentation de Pixel.
Pour illustrer la notion de contact, nous avons décidé de lui faire endosser l'uniforme d'un postier et de lui faire distribuer du courrier vers le bouton de contact.
Lors de la création de l'image de Pixel en postier, nous avons isolé et exporté séparément les parties dont nous aurions besoin par la suite :
- Le corps de Pixel en uniforme
- La partie avant de sa main droite
- L'enveloppe à distribuer
- Le reste de sa main droite
Ceci fait, nous avons intégré les images séparément les unes au dessus des autres dans l'ordre donné au dessus en précisant les z-index de ces parties. Il était important de séparer la main en 2 parties pour pouvoir placer l'enveloppe entre celles-ci.
Ces images indépendantes pouvaient donc être animées indépendamment. En gardant un temps d'animation total constat de 2 secondes et en plaçant les mouvements de façon synchrone sur cette plage, on s'est assurés de garder la synchronicité des animations.
Détail important, toutes les dimensions et déplacements ont été codés en unité relatives, les em afin de rendre l'animation responsive.
Après quelques tests pour peaufiner le timing précis de l'animation et la fluidité des mouvements, quelque chose manquait encore. Nous avons décidé d'ajouter quelques particules pour accentuer l'impression de mouvement.
J'ai donc rajouté quelques particules brillantes qui apparaissent en suivant le mouvement de la main puis s'éloignent doucement les unes des autres en disparaissant.