Comment puis-je déclencher des animations CSS avec JavaScript sur Scroll ?

Déclencher des animations CSS en JavaScript

En l'absence de jQuery, déclencher des animations CSS via JavaScript est une option viable. Ce guide fournit une méthode concise pour y parvenir lorsque l'utilisateur fait défiler la page.

Déclenchement d'une animation CSS avec manipulation de classe

L'approche la plus simple pour déclencher des animations CSS consiste à modifier la présence d'une classe, permettant aux styles définis en son sein de prendre effet. Pour accomplir cela avec du JavaScript pur :

function addClass(element, className) {
  element.classList.add(className);
}

function removeClass(element, className) {
  element.classList.remove(className);
}

Dans l'exemple fourni, vous avez déjà défini des classes CSS pour les animations : "anim" et "anim2". Vous pouvez démarrer l'animation en ajoutant ces classes aux éléments respectifs :

function start() {
  addClass(document.getElementById('logo'), 'anim');
  addClass(document.getElementById('earthlogo'), 'anim2');
}

Déclenchement de l'animation lors du défilement de la page

Enfin, pour lancer l'animation lorsque la page est fait défiler, vous pouvez utiliser la fonction "window.addEventListener":

window.addEventListener('scroll', start);

Cela invoquera votre fonction "start" chaque fois que le La page défile, déclenchant les animations CSS.

Remarque supplémentaire

Les animations définies en CSS à l'aide d'images clés peuvent être déclenchées de la même manière en ajoutant ou en supprimant des classes. Cependant, il est essentiel de s'assurer que l'élément en question possède une propriété de transition définie pour permettre à l'animation de prendre effet.

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!