Comment animer des éléments uniquement lorsqu'ils sont dans la fenêtre ?

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

Q : Comment puis-je afficher des animations sur une page Web uniquement lorsque les éléments sont visibles dans la fenêtre lors du défilement ?

R : Pour y parvenir, vous pouvez utiliser l'API IntersectionObserver.

API Intersection Observer

L'API Intersection Observer vous permet d'observer l'intersection entre un élément et son élément parent ou le fenêtre. Il vous permet de déclencher des événements selon que l'élément est visible ou non dans la fenêtre.

Voici un exemple utilisant l'API pour basculer une classe qui peut être utilisée pour déclencher des animations :

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

const Obs = new IntersectionObserver(inViewport);
const obsOptions = {};

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

Vous pouvez ensuite ajouter des transitions CSS ou des animations aux éléments avec la classe "is-inViewport" pour les animer lorsqu'ils apparaissent dans la fenêtre. Par exemple :

[data-inviewport] {
  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;
}

Avec ce code, les éléments avec l'attribut [data-inviewport] auront une transition CSS. Lorsqu'ils entrent dans la fenêtre, la classe is-inViewport sera ajoutée pour déclencher l'animation.

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!