CATALOGUE Code & Data Formation Animate CC Maîtrisez la programmation dans Animate CC - Ateliers créatif avec Create JS

Créer des Animations de Vignettes avec Create.js

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

Apprenez à utiliser Create.js pour animer les vignettes de vos projets en ajustant leur échelle et opacité.

Détails de la leçon

Description de la leçon

Dans cette leçon, nous explorerons les différentes étapes pour animer des vignettes en utilisant Create.js. Vous apprendrez comment agrandir les vignettes lors du survol, ajuster leur opacité et gérer leur index pour qu'elles apparaissent au premier plan.

En premier lieu, nous préciserons que les vignettes commencent à une échelle de 80% et une opacité de 40%. Lors du survol, nous augmentons l'échelle à 100% et l'opacité à 100% également. Pour la gestion des index, nous utiliserons la méthode setChildIndex pour assurer que la vignette survolée reste au premier plan.

Enfin, nous mettrons en place la fonction de réduction de l'échelle et de l'opacité lorsque le survol cesse, retournant les vignettes à leurs paramètres initiaux. Cette leçon inclut également la gestion des erreurs courantes afin d'assurer un fonctionnement optimal.

Objectifs de cette leçon

Les objectifs de cette vidéo sont d'apprendre à :
1. Utiliser Create.js pour animer les vignettes.
2. Gérer l'échelle et l'opacité des éléments.
3. Manipuler l'index des éléments pour le focus visuel.

Prérequis pour cette leçon

Pour suivre cette vidéo, il est recommandé de :
1. Avoir des connaissances de base en JavaScript.
2. Connaître les principes fondamentaux de Create.js.
3. Être familier avec HTML et CSS.

Métiers concernés

Les concepts enseignés dans cette vidéo sont particulièrement utiles pour :
1. Développeurs front-end.
2. Designers web.
3. Intégrateurs web.

Alternatives et ressources

En plus de Create.js, vous pouvez utiliser :
1. GreenSock Animation Platform (GSAP) pour des animations complexes.
2. Anime.js pour des animations légères et modulaires.
3. CSS animations pour des effets simples sans JavaScript.

Questions & Réponses

La méthode setChildIndex est utilisée pour assurer que la vignette survolée apparaisse toujours au premier plan, ce qui améliore la visibilité et l'interaction utilisateur.
Lors du survol d'une vignette, son échelle passe de 80% à 100%, assurant ainsi un grossissement visuel pour l'utilisateur.
La valeur getNewChildren - 1 assure que l'élément survolé obtienne l'index le plus élevé, le plaçant ainsi au premier plan par rapport aux autres vignettes.