Comment puis-je animer des éléments uniquement lorsqu'ils entrent dans la fenêtre lors du défilement de la page ?

Animation d'éléments dans la fenêtre lors du défilement de la page

Dans une page Web comportant plusieurs éléments animés, il peut être difficile de contrôler le moment où ces animations démarrent. Pour obtenir des animations à défilement fluide, nous avons besoin d'un moyen de les déclencher uniquement lorsque leurs éléments respectifs sont visibles. Voici comment y parvenir à l'aide de l'API IntersectionObserver.

Utilisation de l'API IntersectionObserver

L'API IntersectionObserver surveille la visibilité des éléments par rapport à la fenêtre d'affichage ou à un élément parent spécifié. Nous pouvons l'utiliser pour basculer les animations CSS lorsqu'un élément devient visible.

Extrait de code

const inViewport = (entries, observer) => {
  entries.forEach((entry) => {
    entry.target.classList.toggle("is-inViewport", entry.isIntersecting);
  });
};

const Obs = new IntersectionObserver(inViewport);
const obsOptions = {}; // See: https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#Intersection_observer_options

// Attach observer to every [data-inviewport] element:
document.querySelectorAll('[data-inviewport]').forEach((el) => {
  Obs.observe(el, obsOptions);
});

Exemple d'animation CSS

Voici un exemple de la façon d'appliquer des animations aux éléments qui sont en vue :

[data-inviewport] { /* THIS DEMO ONLY */
  width:100px; height:100px; background:#0bf; margin: 150vh 0; 
}

/* inViewport */

[data-inviewport="scale-in"] { 
  transition: 2s;
  transform: scale(0.1);
}
[data-inviewport="scale-in"].is-inViewport { 
  transform: scale(1);
}

[data-inviewport="fade-rotate"] { 
  transition: 2s;
  opacity: 0;
}
[data-inviewport="fade-rotate"].is-inViewport { 
  transform: rotate(180deg);
  opacity: 1;
}

Conclusion

En tirant parti de l'API IntersectionObserver, nous pouvons désormais contrôler le timing de nos animations, en garantissant qu'elles soient lues lorsque les éléments correspondants deviennent visibles dans la fenêtre. Cette approche offre une expérience transparente et attrayante aux utilisateurs lorsqu'ils parcourent votre page 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!