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

Création d'un Effet Parallax avec JavaScript

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

Découvrez comment utiliser JavaScript pour créer un impressionnant effet Parallax en manipulant les positions de la souris.

Détails de la leçon

Description de la leçon

Dans cette leçon, nous allons apprendre à créer un effet Parallax en JavaScript en utilisant les positions de la souris. Nous commencerons par déclarer quatre variables de référence pour calculer les positions en X et Y de la souris. Ensuite, nous définirons des variables d'amplitude de mouvement pour ajuster la vitesse du mouvement sur les axes horizontal et vertical. Cet ajustement permet de gérer les différences de dimensions entre la largeur et la hauteur de la scène. Nous utiliserons des coefficients spécifiques pour ralentir le mouvement vertical par rapport au mouvement horizontal, favorisant ainsi une meilleure expérience visuelle globale. Cette vidéo est idéale pour les développeurs qui souhaitent enrichir leurs applications web avec des animations plus dynamiques et interactives. Nous passerons en revue chaque étape du processus pour s'assurer que chaque concept est clairement expliqué et bien compris. En fin de leçon, vous saurez comment manipuler les éléments de votre scène pour produire l'effet Parallax souhaité.

Objectifs de cette leçon

Les objectifs de cette vidéo sont :
1. Comprendre les bases de l'effet Parallax.
2. Apprendre à manipuler les positions de la souris en JavaScript.
3. Savoir comment ajuster les mouvements d'animation pour une meilleure expérience utilisateur.

Prérequis pour cette leçon

Pour suivre cette vidéo, il est recommandé d'avoir des connaissances de base en JavaScript et en manipulation du DOM.

Métiers concernés

Les métiers et usages professionnels liés à ce sujet incluent :
1. Développeur front-end.
2. Designer UX/UI.
3. Intégrateur web.

Alternatives et ressources

Des alternatives à l'utilisation directe de JavaScript pour créer des effets Parallax incluent l'utilisation de bibliothèques comme Parallax.js ou ScrollMagic.

Questions & Réponses

On utilise des coefficients différents pour adapter la vitesse des mouvements sur les axes horizontal et vertical, car la scène est plus large que haute.
Les variables poseX et poseY stockent les positions calculées de la souris par rapport à la scène, ajustées pour le centre.
La variable de référence pour la position Y est initialisée en utilisant la position Y de la souris divisée par la hauteur du Canva, puis divisée par deux.