Les intéractions et animations sont des points clés d'un site et trop souvent bâclées ! Apprenez comment faire de superbes animations !
La création d'animations à l'aide de l'effet de parallaxe peut servir à de nombreuses fins et permet à vos visiteurs d'interagir avec le contenu de votre site de diverses manières, par exemple en montrant le fonctionnement d'un objet ou en mettant en évidence l'anatomie d'un produit. Il peut aussi créer un effet visuel qui incite les visiteurs de votre site à surfer plus longtemps.
Tout d'abord, créez une section que l'on peut faire défiler dans et hors de la vue. Faites glisser un élément Section sur le canevas à partir du panneau Elements situé sur la gauche.
La section sélectionnée, ajoutez depuis le panneau Style du padding en haut et en bas. Définissez également l'Overflow sur Hidden pour que le contenu reste dans les limites de la section.
Ajoutez un container dans la section. Attribuez-lui une Height (Hauteur) ainsi que Position → Relative. Cela vous permettra de positionner les images de manière absolue dans le conteneur.
Faites glisser une image du panneau Assets vers la section. Définissez une largeur appropriée et répétez la procédure pour toutes les images. Puisque vous voulez créer une illusion d'espace 3D, veillez à en tenir compte lorsque vous définissez les dimensions des images (ex : les "plus proches" doivent être plus grandes pour en donner l'impression).
Ajoutez une Drop Shadow (ombre portée) à chaque image. Assurez-vous que toutes les images ont le même angle d'ombre. Modifiez la couleur et l'opacité de l'ombre. Définissez sa distance par rapport aux limites de l'image. Ajoutez un peu de flou et définissez également la taille ou l'étendue de l'ombre par rapport aux limites de l'image.
Enfin, définissez la position de chaque image comme absolue. Spécifiez un z-index pour les images. Définissez un z-index plus élevé pour les images que vous souhaitez voir apparaître plus près et qui chevauchent également les images qui apparaissent en arrière-plan.
Dans cette animation, vous souhaitez animer les images lorsque la section défile dans la fenêtre de l'utilisateur. Vous choisirez donc element trigger pendant le défilement dans la fenêtre. Et l'action sera une animation on scroll.
Maintenant que vous avez identifié les éléments de votre interaction, vous pouvez commencer à la créer. Sélectionnez la section qui contient les images que vous avez créées. Ouvrez le panneau Interactions et créez un element trigger de while scrolling in view. Choisissez play scroll animation. Modifiez les limites de l'animation si vous le souhaitez. Cela vous permet de définir le moment où l'animation commence et se termine. Par défaut, l'animation commence lorsque la section commence à entrer dans la fenêtre d'affichage, et elle se termine lorsqu'elle la quitte.
Créez une new scroll animation et nommez-la.
Sélectionnez l'image qui a le z-index le plus élevé et qui semble être la plus proche de votre point de vue. Ajoutez une action move pour modifier la façon dont l'image se déplace pendant l'animation.
Deux keyframes de l'image sont ajoutées à la timeline de l'animation. L'une est fixée à 0 % (le début de l'animation) et l'autre à 100 % (la fin de l'animation).
Sélectionnez la première keyframe à 0 %. Dans les paramètres move transform settings, déplacez l'image vers le bas en fixant sa position sur l'axe Y. Ce sera la position de l'image lorsque la section défilera pour la première fois.
Sélectionnez la deuxième keyframe dans la timeline de l'animation et déplacez l'image vers le haut en définissant sa position sur l'axe des Y. Ce sera la position de l'image lorsque la section défilera hors de vue.
Sélectionnez l'image qui a le z-index le plus bas et qui semble être positionnée tout au fond de la section. Ajoutez une action au scroll de type move. Deux nouvelles keyframes sont ajoutées à la timeline de l'animation pour cette nouvelle image, une à 0% et une autre à 100%.
Sélectionnez la keyframe à 0 % pour cette nouvelle image. Dans les paramètres de la transformation move, déplacez l'image vers le haut en définissant sa position sur l'axe des Y. Cette image commencera à se déplacer à partir de cette position lorsque la section défilera dans la vue.
Sélectionnez la keyframe à 100% pour la même image, et définissez la position sur l'axe des Y. Cette image descendra jusqu'à cette position lorsque vous ferez défiler la page. Si vous avez modifié le easing pour les actions précédentes, veillez à définir le même pour toutes les actions.
Sélectionnez une autre image au premier plan. Ajoutez une action au scroll de type move. Pour la première keyframe, déplacez-la vers le bas. Pour la deuxième keyframe, déplacez l'image vers le haut. L'image doit parcourir une plus grande distance que l'image la plus proche, ainsi l'animation sera plus lente et donnera l'impression recherchée.
Continuez à ajouter des actions de scroll à chacune des images que vous souhaitez animer pendant cette séquence. Veillez à respecter ce schéma logique pour créer une bonne animation de défilement parallaxe : les éléments situés à l'avant (ceux dont l'indice z est le plus élevé) semblent se déplacer plus rapidement que ceux situés à l'arrière (ceux dont l'indice z est le plus faible).
