Comment faire une animation déclenchée par défilement avec JavaScript de base

L'utilisation intelligente de l'animation Web peut améliorer l'expérience utilisateur et améliorer l'attrait du site Web. Mais si l'élément d'animation est situé sous la page, l'utilisateur peut le manquer. Cet article présentera comment utiliser JavaScript natif pour implémenter des animations déclenchées par défilement, afin que l'animation ne commence à jouer que lorsque l'utilisateur défile vers un élément spécifique, en évitant le gaspillage de ressources et en améliorant l'expérience utilisateur.

Nous n'avons pas besoin de compter sur des bibliothèques tierces, nous pouvons l'atteindre avec juste une petite quantité de code JavaScript natif. Le noyau réside dans l'utilisation de l'API d'observateur d'intersection , qui peut détecter efficacement si l'élément cible entre dans la fenêtre.

Implémentez les événements de déclenchement de défilement

Notre approche comprend:

1. Créez la fonction scrollTrigger pour gérer les événements de déclenchement de défilement pour des éléments spécifiques.
2. Lorsque l'élément entre dans la fenêtre, ajoutez la classe .active .
3. Utilisez CSS .active Class.

De plus, nous devons prendre en charge les fonctions de rappel personnalisées pour effectuer des actions spécifiques lorsque les éléments sont visibles, par exemple:

 ScrollTrigger ('. Loader', {
  CB: fonction (el) {
    el.innertext = 'Chargement ...'
    chargement de chargement ()
  }
})

Enfin, nous traiterons également de la non-soutien de l'API d'observateur d'intersection par des navigateurs plus anciens.

API d'observateur d'intersection

L'API d'observateur d'intersection nous permet d'observer de manière asynchrone l'état d'intersection de l'élément cible et de la fenêtre, ce qui est plus efficace que d'écouter les événements de défilement.

Construire une fonction de déclenchement de défilement

Tout d'abord, créez une fonction scrollTrigger , qui reçoit le sélecteur en tant que paramètre:

 fonction ScrollTrigger (sélecteur) {
  Soit Els = document.QuerySelectorAll (sélecteur);
  els = array.from (els);
  els.foreach (el => {
    addObserver (EL);
  });
}
// utilise l'exemple de scrolltrigger ('. Scroll-Reveal');

Ensuite, créez la fonction addObserver et utilisez l'observateur d'intersection pour écouter les éléments:

 fonction ScrollTrigger (sélecteur) {
  Soit Els = document.QuerySelectorAll (sélecteur);
  els = array.from (els);
  els.foreach (el => {
    addObserver (EL);
  });
}
fonction addObserver (el) {
    Soit Observer = new intersectionObserver ((entrées, observateur) => {
      entrées.ForEach (entrée => {
        if (entry.isINTERSECTING) {
          entry.target.classList.add («actif»);
          Observer.unObServe (entrée.target);
        }
      });
    });
  Observer.Observe (El);
}
// utilise l'exemple de scrolltrigger ('. Scroll-Reveal');

Le code ci-dessus ajoutera des classes .active lorsque la partie élément est visible. Pour plus de contrôle fin, nous pouvons utiliser options de l'observateur d'intersection:

 fonction Scrolltrigger (sélecteur, options = {}) {
  Soit Els = document.QuerySelectorAll (sélecteur);
  els = array.from (els);
  els.foreach (el => {
    addObserver (EL, Options);
  });
}
fonction addObserver (el, options) {
  Soit Observer = new intersectionObserver ((entrées, observateur) => {
    entrées.ForEach (entrée => {
      if (entry.isINTERSECTING) {
        entry.target.classList.add («actif»);
        Observer.unObServe (entrée.target);
      }
    });
  }, options);
  Observer.Observe (El);
}
// Utilisez l'exemple de scrolltrigger ('. Scroll-Reveal', {
  rootmargin: '-200px'
});

Maintenant, nous avons atteint les deux premiers buts. Ensuite, ajoutez la prise en charge de la fonction de rappel:

 fonction Scrolltrigger (sélecteur, options = {}) {
  Soit Els = document.QuerySelectorAll (sélecteur);
  els = array.from (els);
  els.foreach (el => {
    addObserver (EL, Options);
  });
}
fonction addObserver (el, options) {
  Soit Observer = new intersectionObserver ((entrées, observateur) => {
    entrées.ForEach (entrée => {
      if (entry.isINTERSECTING) {
        if (options.cb) {
          options.cb (el);
        } autre{
          entry.target.classList.add («actif»);
        }
        Observer.unObServe (entrée.target);
      }
    });
  }, options);
  Observer.Observe (El);
}
// Utilisez l'exemple de scrolltrigger ('. Loader', {
  rootmargin: '-200px',
  CB: fonction (el) {
    el.innertext = 'Chargement ...';
    setTimeout (() => {
      el.innertext = 'tâche terminée! ';;
    }, 1000);
  }
});

Enfin, gérez la compatibilité des navigateurs hérités:

 fonction Scrolltrigger (sélecteur, options = {}) {
  Soit Els = document.QuerySelectorAll (sélecteur);
  els = array.from (els);
  els.foreach (el => {
    addObserver (EL, Options);
  });
}
fonction addObserver (el, options) {
  if (! ('intersectionobserver' dans la fenêtre)) {
    if (options.cb) {
      options.cb (el);
    } autre{
      el.classlist.add ('actif');
    }
    retour;
  }
  Soit Observer = new intersectionObserver ((entrées, observateur) => {
    entrées.ForEach (entrée => {
      if (entry.isINTERSECTING) {
        if (options.cb) {
          options.cb (el);
        } autre{
          entry.target.classList.add («actif»);
        }
        Observer.unObServe (entrée.target);
      }
    });
  }, options);
  Observer.Observe (El);
}
// utilise l'exemple de scrolltrigger ('. Intro-text');
ScrollTrigger ('. Scroll-Reveal', {
  rootmargin: '-200px',
});
ScrollTrigger ('. Loader', {
  rootmargin: '-200px',
  CB: fonction (el) {
    el.innertext = 'Chargement ...';
    setTimeout (() => {
      el.innertext = 'tâche terminée! ';;
    }, 1000);
  }
});

Grâce aux étapes ci-dessus, nous avons réussi à atteindre un effet d'animation déclenché par défilement et avons pris en compte la compatibilité du navigateur. J'espère que cet article peut vous aider à améliorer l'expérience utilisateur de votre site Web.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!