CATALOGUE Code & Data Formation Edge Apprendre Adobe Edge Animate CC - Créez des contenus animés et interactifs

Guide d'Animation Parallaxe

Retour à la formation
Chapitre 29 Leçon 3
Précédent
Suivant

Ce tutoriel présente la création d'un système d'animation parallaxe réactif à la position du pointeur.

Détails de la leçon

Description de la leçon

Dans ce tutoriel, nous explorons la création d'un système d'animation parallaxe dynamique qui réagit à la position du pointeur sur l'écran. Utilisant une série d'instructions en JavaScript, ce système permet de déplacer des objets horizontalement et verticalement en réponse aux mouvements du pointeur. L'animation exploite des variables pour stocker les positions X et Y du pointeur, et utilise des coefficients pour modérer la vitesse de défilement. Pour un effet visuel plus intéressant, les objets se déplacent dans le sens inverse du pointeur grâce à l'utilisation de coefficients négatifs.

Le tutoriel aborde également les défis de performance liés à l'utilisation d'images lourdes, mettant en évidence les limites des navigateurs et des machines. Des conseils sont fournis pour optimiser les performances, comme l'utilisation d'images plus légères et la réduction de la complexité des scènes. En fin de compte, ce système peut produire des animations visuellement attrayantes tout en démontrant les capacités des technologies web modernes malgré les contraintes de performance.

Objectifs de cette leçon

Les objectifs de cette vidéo sont:

  • Apprendre à créer des animations parallaxes interactives.
  • Comprendre les techniques de gestion des performances pour les animations web.
  • Découvrir l'utilité des coefficients dans la modération des mouvements des objets animés.

Prérequis pour cette leçon

Les prérequis pour suivre ce tutoriel sont:

  • Connaissances de base en HTML, CSS et JavaScript.
  • Expérience avec les images bitmap et les formats de fichiers comme PNG.
  • Familiarité avec les concepts de performance web et optimisation des ressources.

Métiers concernés

Les connaissances acquises dans ce tutoriel sont applicables dans les métiers suivants:

  • Développeur Web.
  • Designer UI/UX.
  • Animateur numérique.

Alternatives et ressources

Pour réaliser des animations similaires, on peut aussi utiliser:

  • Greensock Animation Platform (GSAP).
  • Anime.js pour des animations plus complexes.
  • Bibliothèques CSS comme Animate.css.

Questions & Réponses

L'utilisation d'images lourdes peut entraîner des ralentissements et des sauts dans l'animation, affectant ainsi la fluidité de l'expérience utilisateur.
Inverser les valeurs de déplacement permet de créer un effet visuel plus dynamique où les objets se déplacent dans le sens inverse du mouvement du pointeur.
Les coefficients permettent de contrôler la vitesse de défilement des objets en les multipliant ou en les divisant, permettant ainsi de créer des effets de profondeur et de modérer les mouvements.