0Pricing
JavaScript Academy · Leçon

Animations déclenchées par le défilement

Animez les éléments lorsqu’ils entrent dans la zone visible.

Animations déclenchées par le défilement est une leçon JavaScript Academy gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage JavaScript Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours JavaScript Academy comprend 4 leçons au total.

Animer lors du défilement

Un effet courant consiste à faire apparaître progressivement ou à faire glisser les éléments dans la zone visible lorsque l’utilisateur les atteint en faisant défiler la page. L’observateur d’intersections rend cela simple : ajoutez une classe CSS lorsqu’un élément entre dans la zone d’affichage, puis laissez CSS gérer l’animation.

La partie CSS

Définissez un état initial masqué et un état final visible en CSS. Le JavaScript ne fait qu’activer ou désactiver une classe ; la transition est entièrement gérée par CSS, ce qui la rend fluide.

// .reveal { opacity: 0; transform: translateY(20px);
//   transition: opacity 0.6s, transform 0.6s; }
// .reveal.visible { opacity: 1; transform: none; }

Sélectionner les cibles

Marquez les éléments que vous souhaitez animer avec une classe commune, puis rassemblez-les.

const items = document.querySelectorAll('.reveal');
console.log('animating', items.length, 'elements');

Créer l’observateur

Utilisez un seuil afin que l’animation commence lorsqu’une partie significative de l’élément est visible, et non dès le premier pixel.

const observer = new IntersectionObserver(reveal, {
  threshold: 0.2 // 20% visible
});

Ajouter la classe

Dans la fonction de rappel, ajoutez la classe visible aux cibles qui se trouvent dans une intersection. CSS les anime alors pour les faire apparaître.

function reveal(entries) {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('visible');
    }
  });
}

Animer une seule fois

Pour une apparition unique, cessez d’observer l’élément après avoir ajouté la classe afin qu’il ne soit pas animé à nouveau lorsque l’utilisateur le quitte puis y revient.

function reveal(entries, obs) {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('visible');
      obs.unobserve(entry.target); // animate only once
    }
  });
}

Animer dans les deux sens

Si vous souhaitez que les éléments s’animent lorsqu’ils sortent de la zone visible, activez ou désactivez la classe selon isIntersecting et continuez à les observer.

function reveal(entries) {
  entries.forEach(entry => {
    entry.target.classList.toggle('visible', entry.isIntersecting);
  });
}

Commencer l’observation

Observez chaque cible pour commencer le suivi. L’observateur se déclenche lorsque l’utilisateur fait défiler la page au-delà de chacune d’elles.

items.forEach(el => observer.observe(el));

Décaler les animations

Créez un effet en cascade en appliquant un délai de transition croissant. Vous pouvez le définir à partir d’un attribut de données ou de l’index de l’élément.

items.forEach((el, i) => {
  el.style.transitionDelay = (i * 100) + 'ms';
  observer.observe(el);
});

Respecter la réduction des mouvements

Certains utilisateurs préfèrent réduire les mouvements. Vérifiez la requête média et ignorez les animations pour ces utilisateurs afin d’afficher immédiatement le contenu.

const reduce = window.matchMedia(
  '(prefers-reduced-motion: reduce)'
).matches;
if (reduce) {
  items.forEach(el => el.classList.add('visible'));
}

Gains de performance

Comme l’essentiel du travail est réalisé par les transitions CSS et que la détection de visibilité est prise en charge par le navigateur, les animations liées au défilement restent fluides, même avec de nombreux éléments. Aucun calcul lié aux événements de défilement, aucune saccade.

Vérification rapide

Vérifiez votre compréhension des animations déclenchées par le défilement.

Récapitulatif

Vous avez créé des animations déclenchées par le défilement :

  • Définissez les états masqué et visible en CSS.
  • Observez les cibles avec un threshold adapté.
  • Activez ou désactivez une classe lors de l’intersection ; CSS se charge de l’animation.
  • Utilisez unobserve pour les apparitions uniques.
  • Respectez prefers-reduced-motion.

Vous avez terminé l’observateur d’intersections. Ensuite, nous étudierons les traitements Web en arrière-plan.

Questions Fréquemment Posées

La leçon « Animations déclenchées par le défilement » est-elle gratuite ?

Oui — le texte complet de « Animations déclenchées par le défilement » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours JavaScript Academy, passe à CoddyKit PRO. Le cours JavaScript Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Animations déclenchées par le défilement » ?

Animez les éléments lorsqu’ils entrent dans la zone visible. Tu pratiques JavaScript Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer JavaScript Academy ?

Aucune expérience préalable n'est requise. JavaScript Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 4 sur 4.

Combien de temps prend la leçon « Animations déclenchées par le défilement » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon JavaScript Academy ?

Oui. Chaque leçon JavaScript Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

  1. Observer la visibilité des éléments
  2. Chargement différé des images
  3. Défilement infini
  4. Animations déclenchées par le défilement
← Retour à JavaScript Academy