JR.

Apparition au scroll avec l’API Intersection Observer

Developpement -

Vous avez sûrement plusieurs fois vu des sites avec des sections s’animer lorsqu’on scroll. Cette petite touche artistique (évidemment c’est de l’art…de dev) est faisable grâce à cette API sympa nommé Intersection Observer.

Imaginons une page simple avec plusieurs sections :

<body>
<h1>Intersection Observer API</h1>
  <section>Section</section>
  <section>Section</section>
  <section>Section</section>
  <section>Section</section>
  <section>Section</section>
  <section>Section</section>
  <section>Section</section>
</body>

Dans notre JS, on s’y prendra de cette façon :

On initialise d’abord nos sections (en ES6 ici)

const targets = document.querySelectorAll('section');

Puis on initialise un nouvel objet IntersectionObserver avec un callback comme ceci : 

const observer = new IntersectionObserver(handleIntersection);

Si je ne possédais qu’une seule section, il me suffirait alors de faire : 

observer.observe(targets);

Ayant plusieurs sections, je dois boucler dessus comme ceci : 

targets.forEach(target => observer.observe(target));

Comme vous avez pu le voir, l’élément clé est la fonction observe qui permet d’observer en temps réel que la cible apparaissent à l’écran. Un peu l’équivalent du watch pour les amateurs.

Voici le résultat final :

Pour d’informations à propos de cette API, je vous propose d’aller sur le site du MDN pour lire la doc complète : MDN Web Docs