Comment déclencher des animations CSS lorsque des éléments entrent dans la fenêtre pendant le défilement de la page ?

Animation d'éléments lorsqu'ils sont visibles dans la fenêtre pendant le défilement de la page

Lors de l'utilisation d'animations CSS sur une page Web, il est courant de rencontrer des situations où toutes les animations sont lues simultanément, obscurcissant celles en le bas. Pour résoudre ce problème, nous allons explorer une solution utilisant l'API IntersectionObserver.

API IntersectionObserver

L'API IntersectionObserver permet aux développeurs de surveiller les modifications dans l'intersection d'un élément avec son conteneur parent ou la fenêtre d'affichage. Lorsqu'un élément apparaît, il déclenche un événement qui peut être utilisé pour lancer des actions.

Exemple de mise en œuvre

Voici un exemple qui déclenche le basculement de la classe CSS lorsque un élément devient visible dans la fenêtre :

<br>const inViewport = (entrées, observateur) => {<br> entrées.forEach(entry => {</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">entry.target.classList.toggle("is-inViewport", entry.isIntersecting);

Copier après la connexion

});
};

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

// Attacher un observateur à chaque élément [data-inviewport] :
document .querySelectorAll('[data-inviewport]').forEach(el => {
Obs.observe(el, obsOptions);
});

Dans l'exemple ci-dessus, tous les éléments avec l'attribut [data-inviewport] seront surveillés. Lorsqu'un élément est visible, la classe is-inViewport est ajoutée et l'animation définie dans le CSS ci-dessous se déclenchera.

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

[data -inviewport="fade-rotate"] { 
 transition : 2s;
 opacité : 0;
}
[data-inviewport="fade-rotate"].is-inViewport { 
 transformation : rotation (180deg);
 opacité : 1 ;
}
< ;/pre>
Cette solution garantit que les animations ne sont lues que lorsque les éléments deviennent visibles lors du défilement, améliorant ainsi l'expérience utilisateur et créant une page Web plus attrayante visuellement.
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!