https://www.proxiserve.fr/static/frontend/Proxiserve/default/fr_FR/js/intersectObserver.js

1
2
3/**
4 * Handle the increment value for method trigerNum
5 * @param {Number} length 
6 * @returns String
7 */
8function handleIncrementValue(length) {
9  let increment = ''
10
11  for (let i = 0; i < length; i++) {
12    increment += '0'
13  }
14  
15  return increment;
16}
17
18/**
19 * Increment numbers animation
20 * @param {HTMLElement} element 
21 */
22function trigerNum(element){
23
24  let cpt = 0;
25  let timer = 1;
26  let numberTo = parseInt(element.dataset.to.replace(' ', ''))
27  let increment = parseInt(`1${handleIncrementValue(numberTo.toString().length-3)}`)
28  let delta = Math.ceil(((timer * 1000) / numberTo));
29
30
31  function count() {
32      cpt = (cpt + increment);
33      element.innerHTML = cpt;
34      if (cpt <= numberTo - increment) {
35          setTimeout(count, delta);
36      }
37  }
38  setTimeout(count, delta);
39
40} 
41
42
43/**
44 * Handle Entries Intersect Observer
45 */
46function entriesHandler(entries, observer) {
47
48  entries
49    .filter(entry => !entry.target.classList.contains('animated'))
50    .forEach(filteredEntry => {
51      const quarterIntersectAnimation = filteredEntry.target.classList.contains('animate-quarter_intersect');
52      const halfIntersectAnimation = filteredEntry.target.classList.contains('animate-half_intersect');
53      const fullIntersectAnimation = filteredEntry.target.classList.contains('animate-full_intersect');
54      const isIncrementAnimation = filteredEntry.target.classList.contains('animate-increment_number');
55
56      if(filteredEntry.intersectionRatio >= .25 && quarterIntersectAnimation) filteredEntry.target.classList.add('animated')
57      if(filteredEntry.intersectionRatio >= .5 && halfIntersectAnimation) filteredEntry.target.classList.add('animated')
58      if(filteredEntry.intersectionRatio === 1 && fullIntersectAnimation) filteredEntry.target.classList.add('animated')
59
60      if(isIncrementAnimation) trigerNum(filteredEntry.target)
61
62    })
63}
64
65/**
66 * Create observer
67 */
68window.addEventListener("DOMContentLoaded", (e) => {
69  let elementsToObserve = document.querySelectorAll(".animate-target");
70
71  let observer = new IntersectionObserver(entriesHandler, {  threshold: [0, .25, .5, .75, 1] });
72
73  elementsToObserve.forEach(element => {
74    observer.observe(element);
75  })
76})
77
78
79