Comment puis-je animer des éléments uniquement lorsqu'ils sont dans la fenêtre à l'aide de CSS3 et de l'API IntersectionObserver ?

Animer des éléments dans la fenêtre

En CSS3, vous pouvez ajouter des animations aux éléments HTML pour les faire bouger ou changer d'apparence lorsque certaines conditions sont remplies . Cependant, si vous souhaitez que ces animations ne soient lues que lorsque les éléments sont visibles dans la fenêtre, vous pouvez utiliser l'API IntersectionObserver.

Utilisation de l'API IntersectionObserver

L'API IntersectionObserver permet d'observer l'intersection des éléments avec la fenêtre ou un élément ancêtre. Lorsqu'un élément devient visible (c'est-à-dire qu'il croise la fenêtre), vous pouvez déclencher une action, comme basculer une classe ou exécuter une animation.

Voici un exemple d'implémentation utilisant IntersectionObserver :

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);
});

Dans la fonction inViewport, nous vérifions si l'élément coupe la fenêtre (c'est-à-dire, Entry.isIntersecting) et basculons une classe est-inViewport sur l'élément cible.

Pour styliser l'animation, vous pouvez utiliser des transitions CSS ou des images clés comme d'habitude. Par exemple, vous pouvez définir l'animation d'un élément avec data-inviewport="scale-in" comme suit :

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

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

Avec cette configuration, l'élément passera de 10 % à 100 % lorsqu'il deviendra visible dans la fenêtre.

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!