https://graviere-foulon-architecture.com/wp-content/themes/gfoulon…?ver=3fb28f80ef2258f2c07c94e88b5d9234

1/*
2v1.1 04/03/2024 : ajout stagger
3*/
4// animation quand un bloc apparait
5function init_reveal()
6{
7	if (!('IntersectionObserver' in window))
8	{
9		console.warn('browser dont support IntersectionObserver');
10		return;
11	}
12
13	var items = document.querySelectorAll('[data-onvisible]');
14	var config = {
15    // If the image gets within 60% in the Y axis, start the download.
16    rootMargin: '0px 0px',
17    threshold: 0.6
18  };
19  var observer = new IntersectionObserver(onIntersection, config);
20
21  items.forEach(item=> observer.observe(item) )
22
23  var itemCount = items.length;
24
25
26  function onIntersection(entries)
27  {
28    // Disconnect if we've already loaded all of the images
29    if (itemCount === 0) {
30      observer.disconnect();
31    }
32
33    let delay=0;
34    // Loop through the entries
35    for (var i = 0; i < entries.length; i++)
36    {
37      var entry = entries[i];
38      // Are we in viewport?
39      if (entry.isIntersecting)
40      {
41        console.log('show',entry);
42        //console.log(entry.target,entry.intersectionRatio,entry)
43        itemCount--;
44
45        // Stop watching and load the image
46        observer.unobserve(entry.target);
47        var img=entry.target;
48        if(img.classList.contains('stagger')) {
49          img.classList.add( 'animate__delay-'+delay);
50          delay++;
51        }
52        img.classList.add( img.getAttribute('data-onvisible'));
53      }
54    }
55  }
56}
57init_reveal();