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

Animation du Scroll Automatique avec JavaScript

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

Découvrez comment animer la valeur du scroll pour créer un effet de défilement automatique en JavaScript.

Détails de la leçon

Description de la leçon

Dans cette leçon, nous allons explorer la manière de créer un scroll automatique avec JavaScript, en animant la valeur du scroll. Nous commencerons par définir une fonction pour contrôler la position du scroll sur la page en utilisant la propriété scrollTop. Cette fonction acceptera deux paramètres : la destination du scroll et la vitesse de l'animation.

Nous aborderons également la compatibilité avec différents navigateurs, en utilisant des conditions pour détecter et cibler des navigateurs spécifiques comme Firefox, Internet Explorer et Google Chrome. Ensuite, nous réaliserons une animation fluide en utilisant CreateJS pour appliquer l'effet de scroll. Finalement, nous mettrons en place des boutons interactifs qui permettront aux utilisateurs de naviguer automatiquement vers le bas ou le haut de la page, ou vers une position intermédiaire personnalisée.

Objectifs de cette leçon

Les objectifs de cette vidéo incluent l'apprentissage de la manipulation de la propriété scrollTop, l'utilisation des conditions pour gérer la compatibilité entre différents navigateurs, et la mise en place d'animations fluides avec CreateJS.

Prérequis pour cette leçon

Pour suivre cette vidéo, il est recommandé de connaître les bases de JavaScript, ainsi que les principes fondamentaux de la manipulation du DOM.

Métiers concernés

Cette compétence est particulièrement utile pour les développeurs front-end, les designers web, et les ingénieurs en expérience utilisateur (UX).

Alternatives et ressources

D'autres bibliothèques ou méthodes pour réaliser des animations de scroll peuvent inclure jQuery, GSAP (GreenSock Animation Platform), ou l'utilisation des API CSS pour les animations.

Questions & Réponses

CreateJS est utilisé pour assurer une animation fluide et précise de la propriété scrollTop.
Firefox et Internet Explorer nécessitent des conditions particulières pour le ciblage du document.
Nous utilisons une fonction de rappel avec CreateJS pour exécuter un code spécifique lorsque l'animation est terminée.