templates/home/equipements/element.js line 1

Open in your IDE?
  1. var ar1 = document.querySelector('#ar1');
  2. var ar2 = document.querySelector('#ar2');
  3. var ar3 = document.querySelector('#ar3');
  4. var ar4 = document.querySelector('#ar4');
  5. var ar5 = document.querySelector('#ar5');
  8. if (window.innerWidth <= 678) {
  9.   // Le code JavaScript ici ne s'exécutera que si la largeur de la fenêtre est supérieure ou égale à 678 pixels
  11.   window.addEventListener('scroll', function () {
  12.     var groupe_for_element_equipements = document.querySelector('.groupe_for_element_equipements');
  13.     var rect_equip = groupe_for_element_equipements.getBoundingClientRect();
  14.     var viewportHeight = window.innerHeight;
  16.     // 20% de la hauteur de la fenêtre
  17.     if (rect_equip.top + (viewportHeight * 0.6) < viewportHeight && rect_equip.bottom > 0) {
  18.       ar1.classList.add('loulou');
  19.       ar1.classList.add('cover1__2');
  20.     } else {
  21.       ar1.classList.remove('loulou');
  22.       ar1.classList.remove('cover1__2');
  23.     }
  25.     // 40% de la hauteur de la fenêtre
  26.     if (rect_equip.top + (viewportHeight * 0.8) < viewportHeight && rect_equip.bottom > 0) {
  27.       ar1.classList.remove('loulou');
  28.       ar1.classList.remove('cover1__2');
  29.       ar2.classList.add('loulou');
  30.       ar2.classList.add('cover2__2');
  31.     } else {
  32.       ar2.classList.remove('loulou');
  33.       ar2.classList.remove('cover2__2');
  34.     }
  36.     // 60% de la hauteur de la fenêtre
  37.     if (rect_equip.top + (viewportHeight * 1) < viewportHeight && rect_equip.bottom > 0) {
  38.       ar2.classList.remove('loulou');
  39.       ar2.classList.remove('cover2__2');
  40.       ar3.classList.add('loulou');
  41.       ar3.classList.add('cover3__2');
  42.     } else {
  43.       ar3.classList.remove('loulou');
  44.       ar3.classList.remove('cover3__2');
  45.     }
  47.     // 80% de la hauteur de la fenêtre
  48.     if (rect_equip.top + (viewportHeight * 1.2) < viewportHeight && rect_equip.bottom > 0) {
  49.       ar3.classList.remove('loulou');
  50.       ar3.classList.remove('cover3__2');
  51.       ar4.classList.add('loulou');
  52.       ar4.classList.add('cover4__2');
  53.     } else {
  54.       ar4.classList.remove('loulou');
  55.       ar4.classList.remove('cover4__2');
  56.     }
  58.     // 100% de la hauteur de la fenêtre
  59.     if (rect_equip.top + (viewportHeight * 1.4) < viewportHeight && rect_equip.bottom > 0) {
  60.       ar4.classList.remove('loulou');
  61.       ar4.classList.remove('cover4__2');
  62.       ar5.classList.add('loulou');
  63.       ar5.classList.add('cover5__2');
  64.     } else {
  65.       ar5.classList.remove('loulou');
  66.       ar5.classList.remove('cover5__2');
  67.     }
  69.     // Remarque : le décalage de 120% n'a pas été inclus car cela dépasserait la hauteur de la fenêtre
  70.   });
  71. }
  73. if (window.innerWidth >= 678) {
  74.   // Le code JavaScript ici ne s'exécutera que si la largeur de la fenêtre est supérieure ou égale à 678 pixels
  76.   window.addEventListener('scroll', function () {
  77.     var groupe_for_element_equipements = document.querySelector('.groupe_for_element_equipements');
  78.     var rect_equip = groupe_for_element_equipements.getBoundingClientRect();
  79.     var viewportHeight = window.innerHeight;
  81.     // 20% de la hauteur de la fenêtre
  82.     if (rect_equip.top + (viewportHeight * 0.3) < viewportHeight && rect_equip.bottom > 0) {
  83.       ar1.classList.add('loulou');
  84.       ar1.classList.add('cover1__2');
  85.     } else {
  86.       ar1.classList.remove('loulou');
  87.       ar1.classList.remove('cover1__2');
  88.     }
  90.     // 40% de la hauteur de la fenêtre
  91.     if (rect_equip.top + (viewportHeight * 0.425) < viewportHeight && rect_equip.bottom > 0) {
  92.       ar1.classList.remove('loulou');
  93.       ar1.classList.remove('cover1__2');
  94.       ar2.classList.add('loulou');
  95.       ar2.classList.add('cover2__2');
  96.     } else {
  97.       ar2.classList.remove('loulou');
  98.       ar2.classList.remove('cover2__2');
  99.     }
  101.     // 60% de la hauteur de la fenêtre
  102.     if (rect_equip.top + (viewportHeight * 0.55) < viewportHeight && rect_equip.bottom > 0) {
  103.       ar2.classList.remove('loulou');
  104.       ar2.classList.remove('cover2__2');
  105.       ar3.classList.add('loulou');
  106.       ar3.classList.add('cover3__2');
  107.     } else {
  108.       ar3.classList.remove('loulou');
  109.       ar3.classList.remove('cover3__2');
  110.     }
  112.     // 80% de la hauteur de la fenêtre
  113.     if (rect_equip.top + (viewportHeight * 0.675) < viewportHeight && rect_equip.bottom > 0) {
  114.       ar3.classList.remove('loulou');
  115.       ar3.classList.remove('cover3__2');
  116.       ar4.classList.add('loulou');
  117.       ar4.classList.add('cover4__2');
  118.     } else {
  119.       ar4.classList.remove('loulou');
  120.       ar4.classList.remove('cover4__2');
  121.     }
  123.     // 100% de la hauteur de la fenêtre
  124.     if (rect_equip.top + (viewportHeight * 0.8) < viewportHeight && rect_equip.bottom > 0) {
  125.       ar4.classList.remove('loulou');
  126.       ar4.classList.remove('cover4__2');
  127.       ar5.classList.add('loulou');
  128.       ar5.classList.add('cover5__2');
  129.     } else {
  130.       ar5.classList.remove('loulou');
  131.       ar5.classList.remove('cover5__2');
  132.     }
  134.     // Remarque : le décalage de 120% n'a pas été inclus car cela dépasserait la hauteur de la fenêtre
  135.   });
  136. }