ajout logo animé

web/themes/custom/quartiers_de_demain/css/animated_logo.css

@@ -0,0 +1,66 @@
+#logo-animated-container {
+    width: 60%;
+    margin-left: 20%;
+    margin-right: 20%;
+}
+  @media (max-width:810px) { 
+    #logo-animated-container {
+        width: 74%;
+        margin-left: 13%;
+        margin-right: 13%;
+    }
+  }
+  @media (max-width:640px) { 
+    #logo-animated-container {
+        width: 80%;
+        margin-left: 10%;
+        margin-right: 10%;
+    }
+  }
+#logo-animated {
+    position: relative;
+    top: 0;
+    left: 0;
+    width: 100%;
+    max-width: 1300px;
+    max-height: 1000px;
+    overflow: hidden;
+  }
+
+
+  svg {
+    position: absolute;
+    width: 100%;
+    height: auto;
+    max-width: 1030px;
+    top: 0;
+    left: 0;
+  }
+  img {
+    position: absolute;
+    opacity: 0;
+  }
+  #consultation-couleur {
+    left: min(17%, 180px);
+    top: 0.5%;
+    width: 32%;
+    max-width: 330px;
+  }
+  #consultation-noir {
+    left: min(17%, 180px);
+    top: 0.5%;
+    width: 32%;
+    max-width: 330px;
+  }
+  #quartier-couleur {
+    width: 60%;
+    max-width: 620px;
+    left: min(30%, 310px);
+    top: 3%;
+  }
+  #quartier-noir {
+    width: 60%;
+    max-width: 620px;
+    left: min(30%, 310px);
+    top: 3%;
+  }

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);

web/themes/custom/quartiers_de_demain/quartiers_de_demain.libraries.yml

@@ -2,6 +2,8 @@
 global:
   js:
     js/quartiers_de_demain.js: {}
+    js/animated_logo.js: {}
   css:
     theme:
       css/quartiers_de_demain.css: {}
+      css/animated_logo.css: {}

web/themes/custom/quartiers_de_demain/templates/page--front.html.twig

@@ -61,10 +61,24 @@
 
 
     <div class="layout-content">
+      <div id="logo-animated-container">
         <div id="logo-animated">
 
+          <svg viewBox="0 0 1300 1000" preserveAspectRatio="xMinYMin meet" id="traits">
+            <path d="M25,25 L212,212" stroke="#2b21c8" stroke-width="65"/>
+            <path d="M120,670 310,480" stroke="#f7002b" stroke-width="65"/>
+            <path d="M1225,690 1035,500" stroke="#000000" stroke-width="65"/>
+            <path d="M520,25 Q665,140 810,25" fill="none" stroke="#000000" stroke-width="60"/>
+            <path d="M420,800 Q565,685 710,800" fill="none" stroke="#2b21c8" stroke-width="60"/>
+            <path d="M1270,25 Q1155,170 1270,315" fill="none" stroke="#f7002b" stroke-width="60"/>
+          </svg>
+          <img src="{{ directory }}/images/consultation-couleurs.png" id="consultation-couleur"/>
+          <img src="{{ directory }}/images/consultation-noir.png" id="consultation-noir"/>
+          <img src="{{ directory }}/images/quartier-couleur.png" id="quartier-couleur"/>
+          <img src="{{ directory }}/images/quartier-noir.png" id="quartier-noir"/>
 
         </div>
+      </div>
       {{ page.content }}
     </div>{# /.layout-content #}
 

web/themes/custom/quartiers_de_demain/templates/page.html.twig

@@ -61,10 +61,10 @@
 
     <div class="layout-content">
             
-      <div id="logo-animated">
+{#       <div id="logo-animated">
         <img src=url("../images/logo_accueil_QDD.svg") alt="logo animé consultation quartiers de demain" />
       </div>
-      {{ page.content }}
+ #}      {{ page.content }}
     </div>{# /.layout-content #}
 
     {% if page.sidebar_first %}