templates/home/serviceSlider/element.js line 1

Open in your IDE?
  1. var sv1 = document.querySelector('#sv1');
  2. var sv2 = document.querySelector('#sv2');
  3. var sv3 = document.querySelector('#sv3');
  4. var sv4 = document.querySelector('#sv4');
  5. var sv5 = document.querySelector('#sv5');
  7. if (window.innerWidth <= 678) {
  8.   // Le code JavaScript ici ne s'exécutera que si la largeur de la fenêtre est supérieure ou égale à 678 pixels
  9.   window.addEventListener('scroll', function() {
  10.     var groupe_for_element_service = document.querySelector('.groupe_for_element_service');
  11.     var rect_services = groupe_for_element_service.getBoundingClientRect();
  12.     var viewportHeight = window.innerHeight;
  14.     // 20% de la hauteur de la fenêtre
  15.     if (rect_services.top + (viewportHeight * 0.6) < viewportHeight && rect_services.bottom > 0) {
  16.       sv1.classList.add('loulou');
  17.       sv1.classList.add('svcover1__2');
  18.     } else {
  19.       sv1.classList.remove('loulou');
  20.       sv1.classList.remove('svcover1__2');
  21.     }
  23.     // 40% de la hauteur de la fenêtre
  24.     if (rect_services.top + (viewportHeight * 0.8) < viewportHeight && rect_services.bottom > 0) {
  25.       sv1.classList.remove('loulou');
  26.       sv1.classList.remove('svcover1__2');
  27.       sv2.classList.add('loulou');
  28.       sv2.classList.add('svcover2__2');
  29.     } else {
  30.       sv2.classList.remove('loulou');
  31.       sv2.classList.remove('svcover2__2');
  32.     }
  34.     // 60% de la hauteur de la fenêtre
  35.     if (rect_services.top + (viewportHeight * 1) < viewportHeight && rect_services.bottom > 0) {
  36.       sv2.classList.remove('loulou');
  37.       sv2.classList.remove('svcover2__2');
  38.       sv3.classList.add('loulou');
  39.       sv3.classList.add('svcover3__2');
  40.     } else {
  41.       sv3.classList.remove('loulou');
  42.       sv3.classList.remove('svcover3__2');
  43.     }
  45.     // 80% de la hauteur de la fenêtre
  46.     if (rect_services.top + (viewportHeight * 1.2) < viewportHeight && rect_services.bottom > 0) {
  47.       sv3.classList.remove('loulou');
  48.       sv3.classList.remove('svcover3__2');
  49.       sv4.classList.add('loulou');
  50.       sv4.classList.add('svcover4__2');
  51.     } else {
  52.       sv4.classList.remove('loulou');
  53.       sv4.classList.remove('svcover4__2');
  54.     }
  56.     // 100% de la hauteur de la fenêtre
  57.     if (rect_services.top + (viewportHeight * 1.4) < viewportHeight && rect_services.bottom > 0) {
  58.       sv4.classList.remove('loulou');
  59.       sv4.classList.remove('svcover4__2');
  60.       sv5.classList.add('loulou');
  61.       sv5.classList.add('svcover5__2');
  62.     } else {
  63.       sv5.classList.remove('loulou');
  64.       sv5.classList.remove('svcover5__2');
  65.     }
  67.     // Remarque : le décalage de 120% n'a pas été inclus car cela dépasserait la hauteur de la fenêtre
  68.   });
  69. }
  71. if (window.innerWidth >= 678) {
  72.   // Le code JavaScript ici ne s'exécutera que si la largeur de la fenêtre est supérieure ou égale à 678 pixels
  73.   window.addEventListener('scroll', function() {
  74.     var groupe_for_element_service = document.querySelector('.groupe_for_element_service');
  75.     var rect_services = groupe_for_element_service.getBoundingClientRect();
  76.     var viewportHeight = window.innerHeight;
  78.     // 20% de la hauteur de la fenêtre
  79.     if (rect_services.top + (viewportHeight * 0.3) < viewportHeight && rect_services.bottom > 0) {
  80.       sv1.classList.add('loulou');
  81.       sv1.classList.add('svcover1__2');
  82.     } else {
  83.       sv1.classList.remove('loulou');
  84.       sv1.classList.remove('svcover1__2');
  85.     }
  87.     // 40% de la hauteur de la fenêtre
  88.     if (rect_services.top + (viewportHeight * 0.425) < viewportHeight && rect_services.bottom > 0) {
  89.       sv1.classList.remove('loulou');
  90.       sv1.classList.remove('svcover1__2');
  91.       sv2.classList.add('loulou');
  92.       sv2.classList.add('svcover2__2');
  93.     } else {
  94.       sv2.classList.remove('loulou');
  95.       sv2.classList.remove('svcover2__2');
  96.     }
  98.     // 60% de la hauteur de la fenêtre
  99.     if (rect_services.top + (viewportHeight * 0.55) < viewportHeight && rect_services.bottom > 0) {
  100.       sv2.classList.remove('loulou');
  101.       sv2.classList.remove('svcover2__2');
  102.       sv3.classList.add('loulou');
  103.       sv3.classList.add('svcover3__2');
  104.     } else {
  105.       sv3.classList.remove('loulou');
  106.       sv3.classList.remove('svcover3__2');
  107.     }
  109.     // 80% de la hauteur de la fenêtre
  110.     if (rect_services.top + (viewportHeight * 0.675) < viewportHeight && rect_services.bottom > 0) {
  111.       sv3.classList.remove('loulou');
  112.       sv3.classList.remove('svcover3__2');
  113.       sv4.classList.add('loulou');
  114.       sv4.classList.add('svcover4__2');
  115.     } else {
  116.       sv4.classList.remove('loulou');
  117.       sv4.classList.remove('svcover4__2');
  118.     }
  120.     // 100% de la hauteur de la fenêtre
  121.     if (rect_services.top + (viewportHeight * 0.8) < viewportHeight && rect_services.bottom > 0) {
  122.       sv4.classList.remove('loulou');
  123.       sv4.classList.remove('svcover4__2');
  124.       sv5.classList.add('loulou');
  125.       sv5.classList.add('svcover5__2');
  126.     } else {
  127.       sv5.classList.remove('loulou');
  128.       sv5.classList.remove('svcover5__2');
  129.     }
  131.     // Remarque : le décalage de 120% n'a pas été inclus car cela dépasserait la hauteur de la fenêtre
  132.   });
  133. }