ajout logo animé

web/themes/custom/quartiers_de_demain/js/animated_logo.js

@@ -0,0 +1,69 @@
+
+function setLogoContainerSize() {
+    let svgContainer = document.querySelector('#logo-animated');
+    let svgElement = document.querySelector('svg');
+    svgContainer.style.height = `${svgElement.clientHeight}px`;
+  }
+  setLogoContainerSize();
+  window.addEventListener('resize', setLogoContainerSize);
+
+
+  let chemins = document.querySelectorAll('path');
+  for (let chemin of chemins) {
+    let length = chemin.getTotalLength();
+    chemin.style.strokeDasharray = length;
+    chemin.style.strokeDashoffset = length;
+  }
+
+  
+  let consultationCouleur = document.querySelector('#consultation-couleur');
+  let consultationNoir = document.querySelector('#consultation-noir');
+  
+  let quartierCouleur = document.querySelector('#quartier-couleur');
+  let quartierNoir = document.querySelector('#quartier-noir');
+  
+  let consultationTranslate = 200;
+  let quartierTranslate = -200;
+
+  function startCountdown() {
+    let startTime;
+    let animationTime = 800;
+
+    function animate(timestamp) {
+      if (!startTime) startTime = timestamp;
+      const elapsedTime = timestamp - startTime;
+
+      if (elapsedTime <= animationTime) {
+        const animationPercent = elapsedTime / animationTime;
+        animateLogo(animationPercent);
+        requestAnimationFrame(animate);
+      } else {
+        animateLogo(1);
+      }
+
+    }
+    requestAnimationFrame(animate);
+  }
+
+  function animateLogo(animationPercent) {
+    for (let i = 0; i < chemins.length; i++) {
+      let draw = chemins[i].getTotalLength() * animationPercent;
+      chemins[i].style.strokeDashoffset = chemins[i].getTotalLength() - draw;
+      chemins[i].style.opacity = Math.min(animationPercent * ((chemins.length - 1) / i), 1);
+    }
+    let animationPercentCouleur = Math.min(animationPercent / 0.5, 1);
+    let animationPercentNoir = Math.max((animationPercent - 0.4) / 0.6, 0);
+
+    consultationCouleur.style.opacity = animationPercentCouleur;
+    consultationNoir.style.opacity = animationPercentNoir;
+    quartierCouleur.style.opacity = animationPercentCouleur;
+    quartierNoir.style.opacity = animationPercentNoir;
+
+    consultationNoir.style.transform = `translate(${consultationTranslate * (animationPercent - 1)}px, ${consultationTranslate * (animationPercent - 1)}px)`;
+
+    quartierNoir.style.transform = `translate(${quartierTranslate * (animationPercent - 1)}px, ${quartierTranslate * (animationPercent - 1)}px)`;
+  }
+
+
+
+  window.addEventListener('load', startCountdown);