CATALOGUE Code & Data Formation Animate CC Maîtriser Adobe Animate CC 2017 - Ateliers parallaxe

Créer une Animation Interactive sur vos Pages Web

Retour à la formation
Chapitre 2 Leçon 1
Précédent
Suivant

Apprenez à réaliser des animations interactives utilisant la position de la souris pour ajouter de la profondeur à votre site web.

Détails de la leçon

Description de la leçon

Dans cette leçon, nous explorerons un principe créatif très populaire qui a émergé ces dernières années sur les pages d'accueil des sites web et dans les en-têtes des pages. Ce principe tire parti de la position de la souris en X et en Y pour repositionner des éléments sur la page, en leur appliquant des vitesses variées. Nous utiliserons trois symboles différents : un palmier, la mer et le ciel, que nous déplacerons à différentes vitesses pour créer un effet de profondeur saisissant, rappelant l'animation traditionnelle.

Vous découvrirez que cette technique est relativement simple à implémenter, nécessitant peu de code, et permettant d'obtenir rapidement un effet visuel captivant. Cette méthode d'animation peut être un atout majeur dans la création d'expériences interactives et engageantes pour les utilisateurs.

Objectifs de cette leçon

Les objectifs de cette vidéo sont de :

  • Comprendre le principe de l’animation par position de la souris.
  • Savoir comment implémenter cette technique sur une page web.
  • Créer un effet de profondeur grâce à des vitesses de déplacement variées.

Prérequis pour cette leçon

Les prérequis pour suivre cette vidéo incluent :

  • Des connaissances de base en HTML et CSS.
  • Une familiarité avec JavaScript.
  • Un intérêt pour l'animation web et l'interactivité.

Métiers concernés

Les professionnels qui peuvent bénéficier de ces techniques incluent :

  • Développeurs front-end souhaitant enrichir l'UX de leurs projets.
  • Designers interactifs créant des interfaces engageantes.
  • Responsables du marketing digital cherchant à captiver les visiteurs sur les pages de destination.

Alternatives et ressources

Comme alternatives, vous pouvez utiliser :

  • Des animations CSS pour des effets de mouvements simples.
  • Des librairies JavaScript comme GSAP pour des animations plus complexes.
  • Des outils de création graphique tels que Adobe Animate pour des animations classiques.

Questions & Réponses

L'avantage principal est qu'elle améliore l'interactivité de la page et crée un effet de profondeur visuelle engageant pour les utilisateurs.
Nous utilisons trois symboles : un palmier, la mer et le ciel, que nous faisons bouger à des vitesses différentes pour créer un effet de profondeur.
Cette technique est facile à mettre en œuvre car elle nécessite peu de code pour obtenir un effet visuel spectaculaire, ce qui la rend accessible même pour des développeurs avec peu d'expérience.