premier jet animation header

web/themes/custom/quartiers_de_demain/dist/assets/css/bundle.css

@@ -1281,6 +1281,52 @@ footer {
   top: 60px;
 }
 
+header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-header.animated {
+  transform: scale(2);
+}
+header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-header.animated .blink-blue {
+  animation-delay: 0.2s;
+  animation-name: blink;
+  animation-duration: 5s;
+}
+header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-header.animated .blink-red {
+  animation-delay: 0.4s;
+  animation-name: blink;
+  animation-duration: 5s;
+}
+header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-header.animated .blink-black {
+  animation-delay: 0.6s;
+  animation-name: blink;
+  animation-duration: 5s;
+}
+header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-header.animated .blink-black2 {
+  animation-delay: 0.8s;
+  animation-name: blink;
+  animation-duration: 5s;
+}
+@keyframes blink {
+  0%, 100% {
+    opacity: 0;
+  }
+  50% {
+    opacity: 1;
+  }
+}
+header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-header.animated .consultation {
+  display: none;
+  animation-name: slideIn;
+  animation-delay: 1s;
+  animation-duration: 3s;
+}
+@keyframes slideIn {
+  0% {
+    transform: translateX(0px);
+  }
+  100% {
+    transform: translateX(600px);
+  }
+}
+
 /*pages*/
 #home .content_container #block-quartiers-de-demain-titredepage {
   display: none;

web/themes/custom/quartiers_de_demain/src/assets/js/quartiers_de_demain.js

@@ -38,10 +38,65 @@
   // });
 
   //////// header ////////////
+  document.addEventListener('DOMContentLoaded', function() {
+
+    const header = document.querySelector('header');
+    const logo = document.querySelector('#block-quartiers-de-demain-logoquartiersdedemain > div:nth-child(1) > div:nth-child(1) > a:nth-child(1) > svg:nth-child(1)');
+  
+    // Fonction pour démarrer l'animation du logo SVG
+    function startLogoAnimation() {
+      logo.classList.add('animated');
+    }
+  
+    // Fonction pour arrêter l'animation du logo SVG
+    function stopLogoAnimation() {
+      logo.classList.remove('animated');
+    }
+  
+    // Vérifier si le header a la classe header--collapse
+    function checkHeaderCollapse() {
+      if (header.classList.contains('header--collapsed')) {
+        stopLogoAnimation();
+      } else {
+        startLogoAnimation();
+      }
+    }
+  
+    // Appeler la fonction au chargement initial
+    checkHeaderCollapse();
+  
+    // Observer les changements de classe sur le header
+    const observer = new MutationObserver(function(mutations) {
+      mutations.forEach(function(mutation) {
+        if (mutation.attributeName === 'class') {
+          checkHeaderCollapse();
+        }
+      });
+    });
+  
+    observer.observe(header, { attributes: true });
+  
+    // Autres fonctions et initialisations ici
+  });
 
   document.addEventListener('DOMContentLoaded', function() {
 
     const header = document.querySelector('header');
+    // const logo = document.querySelector('.qdd-header');
+    // console.log(logo);
+
+
+      // Fonction pour démarrer l'animation du logo SVG
+  // function startLogoAnimation() {
+  //   logo.classList.add('animated');
+  // }
+
+  // Fonction pour arrêter l'animation du logo SVG
+  // function stopLogoAnimation() {
+  //   logo.classList.remove('animated');
+  // }
+
+
  // Vérifier si la page a été rechargée ou si c'est une navigation interne
  const isFirstLoad = !performance.getEntriesByType("navigation")[0].type.includes('back_forward');
  // Vérifier si nous sommes sur la page cible
@@ -50,14 +105,17 @@
     // Si ce n'est pas la première charge ou si le chemin n'est pas le chemin cible, ajouter la classe immédiatement
     if (!isFirstLoad || !isTargetPath) {
       header.classList.add('header--collapsed-already');
+      // logo.classList.remove('animated');
+      stopLogoAnimation();
   } else {
       // Sinon, appliquer la transition après un délai
       setTimeout(() => {
           header.classList.add('header--collapsed');
-      }, 1000); // Attendre 1 seconde avant de réduire la taille du header
+      }, 5000); // Attendre 1 seconde avant de réduire la taille du header
   }
 
   
+
        // Gestion du scroll pour afficher/masquer le header nav
     const headerNavContainer = document.querySelector('.header_nav_container');
     const headerLeftContainer = document.querySelector('header');

web/themes/custom/quartiers_de_demain/src/assets/scss/partials/animation-logo-header.scss

@@ -0,0 +1,73 @@
+header{
+    #block-quartiers-de-demain-logoquartiersdedemain{
+        .field_field_logo{
+            .qdd-header{
+                
+                &.animated{
+                    transform: scale(2);   
+                    .blink-blue {
+                        // animation: blink 3s 3;
+                        animation-delay: 0.2s;
+                        animation-name: blink;
+                        animation-duration: 5s;
+                    }
+    
+                    .blink-red {
+                        animation-delay: 0.4s;
+                        animation-name: blink;
+                        animation-duration: 5s;
+                    }
+    
+                    .blink-black {
+                        animation-delay: 0.6s;
+                        animation-name: blink;
+                        animation-duration: 5s;        
+                    }
+    
+                    .blink-black2 {
+                        animation-delay: 0.8s;
+                        animation-name: blink;
+                        animation-duration: 5s;
+                    }
+                    @keyframes blink {
+                        0%, 100% {
+                            opacity: 0;
+                        }
+                        50% {
+                            opacity: 1;
+                        }
+                    }
+
+                    .consultation{
+                        display: none;
+                        animation-name: slideIn;
+                        animation-delay: 1s;
+                        animation-duration: 3s;
+                    } 
+
+                    @keyframes slideIn {
+                        0%{
+                            transform: translateX(0px) ;
+                        }
+                        100%{
+                            transform: translateX(600px) ;
+                        }
+                    } 
+
+                    // @keyframes scale {
+                    //     0%{
+                    //         transform: scale(2);
+                    //     }
+                    //     90%{transform: scale(2);}
+                    //     100% {
+                    //         transform: scale(1);
+                    //     }
+                    // }
+    
+                           
+                }
+            }
+
+        }
+    }
+}

web/themes/custom/quartiers_de_demain/src/assets/scss/partials/header.scss

@@ -219,3 +219,15 @@ header{
     }
 
 }
+// /* Initial state of SVG */
+// .qdd-animated{
+//     opacity: 1;
+//     transform: scale(0.5);
+//     transition: opacity 0.5s, transform 0.5s;
+//   }
+  
+//   /* Animated state of SVG */
+//   .header:not(.header--collapsed .header--collapsed-already) .qdd-animated {
+//     opacity: 1;
+//     transform: scale(1);
+//   }

web/themes/custom/quartiers_de_demain/src/assets/scss/quartiers_de_demain.scss

@@ -29,6 +29,8 @@
 @import "partials/slick";
 @import "partials/timeline";
 @import "partials/actu-caroussel-home";
+@import "partials/animation-logo-header";
+
 
 // @import "partials/slick_custom";
 

web/themes/custom/quartiers_de_demain/templates/field--block-content--logo-link.html.twig

@@ -40,6 +40,7 @@
 {# Define the SVG icon #}
 {% set svg_icon %}
 <svg
+  class='qdd-header'
   width="87.153343mm"
   height="29.698406mm"
   viewBox="0 0 87.153343 29.698406"
@@ -51,6 +52,7 @@
     id="layer1"
     transform="translate(-61.433626,-104.40973)">
     <g
+    class="consultation"
       aria-label="CONSULTATION INTERNATIONALE"
       id="text1410"
       style="font-weight:500;font-size:4.50432px;font-family:'Gilroy Medium';-inkscape-font-specification:Gilroy-Medium;fill:#1d1d1b;stroke-width:0.118122"
@@ -146,6 +148,7 @@
            id="g1420"
            transform="translate(751.3907,1648.7133)">
           <path
+          class="blink-blue"
              d="m 0,0 c 16.692,16.692 43.755,16.692 60.447,0 16.692,-16.692 16.692,-43.755 0,-60.447 -16.692,-16.692 -43.755,-16.692 -60.447,0 l 7.433,7.433 c 12.587,-12.587 32.994,-12.587 45.581,0 12.587,12.587 12.587,32.994 0,45.581 -12.587,12.587 -32.994,12.587 -45.581,0 z"
              style="fill:#2b21c8;fill-opacity:1;fill-rule:nonzero;stroke:none"
              id="path1422" />
@@ -154,6 +157,7 @@
            id="g1424"
            transform="translate(1405.2317,1559.5776)">
           <path
+          class="blink-red"
              d="M 0,0 12.318,-0.061 V -46.545 H 0 Z"
              style="fill:#f7002b;fill-opacity:1;fill-rule:nonzero;stroke:none"
              id="path1426" />
@@ -162,6 +166,7 @@
            id="g1428"
            transform="translate(1148.891,1559.5776)">
           <path
+          class="blink-blue"
              d="M 0,0 12.318,-0.061 V -46.545 H 0 Z"
              style="fill:#2b21c8;fill-opacity:1;fill-rule:nonzero;stroke:none"
              id="path1430" />
@@ -170,6 +175,7 @@
            id="g1432"
            transform="translate(1059.3877,1523.8738)">
           <path
+          class="blink-blue"
              d="M 0,0 12.318,-0.061 V -46.81 H 0 Z"
              style="fill:#0732c2;fill-opacity:1;fill-rule:nonzero;stroke:none"
              id="path1434" />
@@ -178,6 +184,7 @@
            id="g1436"
            transform="translate(842.5666,1525.142)">
           <path
+          class="blink-blue"
              d="M 0,0 12.318,-0.054 V -41.613 H 0 Z"
              style="fill:#0732c2;fill-opacity:1;fill-rule:nonzero;stroke:none"
              id="path1438" />
@@ -186,6 +193,7 @@
            id="g1440"
            transform="translate(1246.5872,1623.5623)">
           <path
+          class="blink-blue"
              d="M -0.19798272,0 12.120017,-0.051 V -39.192 H -0.19798272 Z"
              style="fill:#2b21c8;fill-opacity:1;fill-rule:nonzero;stroke:none"
              id="path1442" />
@@ -194,6 +202,7 @@
            id="g1444"
            transform="translate(1050.5181,1658.2612)">
           <path
+          class="blink-red"
              d="M 0,0 12.214,-0.045 V -34.094 H 0 Z"
              style="fill:#f7002b;fill-opacity:1;fill-rule:nonzero;stroke:none"
              id="path1446" />
@@ -202,6 +211,7 @@
            id="g1448"
            transform="translate(1328.6346,1658.2612)">
           <path
+          class="blink-red"
              d="M 0,0 12.214,-0.045 V -34.094 H 0 Z"
              style="fill:#f7002b;fill-opacity:1;fill-rule:nonzero;stroke:none"
              id="path1450" />
@@ -210,6 +220,7 @@
            id="g1452"
            transform="translate(910.89509,1659.3624)">
           <path
+          class="blink-red"
              d="M 0.09799602,0 12.318,-0.061 V -46.545 H 0.09799602 Z"
              style="fill:#f7002b;fill-opacity:1;fill-rule:nonzero;stroke:none"
              id="path1454" />
@@ -218,15 +229,18 @@
            id="g1456"
            transform="translate(1121.2274,1648.2275)">
           <path
+          class="blink-red"
              d="M 0,0 0.061,10.076 H 46.545 V 0 Z"
              style="fill:#f7002b;fill-opacity:1;fill-rule:nonzero;stroke:none"
              id="path1458" />
         </g>
         <path
+        class="blink-blue"
            d="m 1302.919,1494.638 h -26.436 v 10.895 h 26.436 z"
            style="fill:#0732c2;fill-opacity:1;fill-rule:nonzero;stroke:none"
            id="path1460" />
         <path
+        class="blink-blue"
            d="m 987.263,1592.995 h -26.437 v 10.895 h 26.437 z"
            style="fill:#0732c2;fill-opacity:1;fill-rule:nonzero;stroke:none"
            id="path1462" />
@@ -234,6 +248,7 @@
            id="g1464"
            transform="translate(1022.9188,1576.3727)">
           <path
+          class="blink-black"
              d="m 0,0 h -12.398 l -25.003,60.878 -0.232,0.644 -0.013,-0.043 -0.013,0.024 -0.016,-0.024 -0.014,0.043 L -37.92,60.878 -62.923,0 h -12.385 l 33.882,82.514 h 7.53 z"
              style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
              id="path1466" />
@@ -242,6 +257,7 @@
            id="g1468"
            transform="translate(817.5048,1596.5179)">
           <path
+          class="blink-black2"
              d="m 0,0 16.707,-17.04 -8.6,-8.985 -16.821,17.311 z"
              style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
              id="path1470" />
@@ -250,6 +266,7 @@
            id="g1472"
            transform="translate(923.2098,1609.196)">
           <path
+          class="blink-black"
              d="m 0,0 c 0,-13.313 -5.283,-33.449 -33.004,-33.449 -27.725,0 -33.228,20.136 -33.228,33.449 v 50.166 h 12.214 V 0 c 0,-4.953 1.099,-23.325 21.014,-23.325 19.912,0 20.792,18.372 20.792,23.325 V 16.965 H 0 Z"
              style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
              id="path1474" />
@@ -258,6 +275,7 @@
            id="g1476"
            transform="translate(1099.4768,1628.9966)">
           <path
+          class="blink-black2"
              d="m 0,0 c 0,11.111 -7.698,19.144 -17.053,19.144 h -31.906 v 10.121 h 12.215 19.803 C -0.769,29.156 12.214,16.614 12.214,0 c 0,-12.542 -7.261,-22.663 -17.712,-27.065 L 12.214,-53.249 H -1.319 l -16.173,23.984 h -19.252 v -23.984 h -12.215 v 34.105 h 31.906 C -7.698,-19.144 0,-11.222 0,0"
              style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
              id="path1478" />
@@ -266,15 +284,18 @@
            id="g1480"
            transform="translate(1161.8838,1648.1403)">
           <path
+          class="blink-black"
              d="m 0,0 v -72.393 h -12.214 l 0.002,82.514 H 25.522 V 0 Z"
              style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
              id="path1482" />
         </g>
         <path
+        class="blink-black2"
            d="m 1206.879,1658.261 h 12.209 v -82.514 h -12.209 z"
            style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
            id="path1484" />
         <path
+        class="blink-black"
            d="m 1246.395,1585.868 h 54.904 v -10.121 h -54.904 z m 47.086,27.616 h -47.086 v 10.233 h 47.086 z m 7.817,34.656 h -54.904 v 10.121 h 54.904 z"
            style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
            id="path1486" />
@@ -282,6 +303,7 @@
            id="g1488"
            transform="translate(1377.5935,1628.9966)">
           <path
+          class="blink-black2"
              d="m 0,0 c 0,11.111 -7.698,19.144 -17.053,19.144 h -31.906 v 10.121 h 12.215 19.803 C -0.769,29.156 12.214,16.614 12.214,0 c 0,-12.542 -7.261,-22.663 -17.712,-27.065 L 12.214,-53.249 H -1.319 l -16.173,23.984 h -19.252 v -23.984 h -12.215 v 34.105 h 31.906 C -7.698,-19.144 0,-11.222 0,0"
              style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
              id="path1490" />
@@ -290,15 +312,18 @@
            id="g1492"
            transform="translate(1474.0773,1591.0393)">
           <path
+          class="blink-black2"
              d="m 0,0 c -3.958,-9.344 -15.055,-15.17 -28.897,-15.292 v 10.124 c 9.546,0.117 15.148,3.636 17.454,9.129 1.761,4.072 0.33,8.472 0.221,8.581 -2.312,6.381 -8.693,7.812 -17.713,10.562 -10.232,3.08 -22.005,5.613 -25.854,16.393 -2.094,5.61 -1.54,12.103 1.319,17.383 6.381,12.103 22.663,12.435 24.535,12.435 12.1,0 22.881,-5.282 30.584,-13.754 l -8.03,-8.031 c -4.514,6.602 -13.313,11.662 -22.554,11.662 -0.111,0 -9.794,0 -13.534,-7.041 -1.431,-2.751 -1.76,-6.381 -0.771,-9.244 2.203,-6.048 8.472,-7.479 17.274,-10.121 C -15.513,29.594 -3.742,27.174 0.439,16.063 0.769,15.292 3.41,7.812 0,0"
              style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
              id="path1494" />
         </g>
         <path
+        class="blink-black"
            d="m 842.567,1487.123 h 54.904 v -10.121 h -54.904 z m 47.086,27.615 h -47.086 v 10.233 h 47.086 z m 7.817,34.657 h -54.904 v 10.121 h 54.904 z"
            style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
            id="path1496" />
         <path
+        class="blink-black"
            d="m 1059.388,1487.185 h 54.904 v -10.121 h -54.904 z m 47.086,27.615 h -47.086 v 10.233 h 47.086 z m 7.817,34.657 h -54.904 v 10.121 h 54.904 z"
            style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
            id="path1498" />
@@ -306,6 +331,7 @@
            id="g1500"
            transform="translate(1148.891,1514.2576)">
           <path
+          class="blink-black2"
              d="M 0,0 12.318,-0.051 V -37.194 H 0 Z M 86.754,45.32 V -37.194 H 74.545 V 24.748 L 46.841,-37.194 H 39.912 L 0,45.32 H 14.731 L 43.322,-17.127 70.533,45.32 Z"
              style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
              id="path1502" />
@@ -314,11 +340,13 @@
            id="g1504"
            transform="translate(1338.3157,1477.0637)">
           <path
+          class="blink-black"
              d="m 0,0 h -12.398 l -25.003,60.878 -0.232,0.644 -0.013,-0.043 -0.013,0.024 -0.016,-0.024 -0.014,0.043 L -37.92,60.878 -62.923,0 h -12.385 l 33.882,82.514 h 7.53 z"
              style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
              id="path1506" />
         </g>
         <path
+        class="blink-black"
            d="m 1365.716,1559.578 h 12.209 v -82.514 h -12.209 z"
            style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
            id="path1508" />
@@ -326,6 +354,7 @@
            id="g1510"
            transform="translate(1405.2317,1513.6991)">
           <path
+          class="blink-black2"
              d="M 0,0 12.318,-0.048 V -36.635 H 0 Z M 71.292,45.879 V -36.635 H 56.55 L 0,45.879 h 14.744 l 44.333,-65.68 v 65.68 z"
              style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
              id="path1512" />
@@ -334,6 +363,7 @@
            id="g1514"
            transform="translate(781.6142,1575.7473)">
           <path
+          class="blink-black2"
              d="m 0,0 c -23.606,0 -42.742,19.136 -42.742,42.742 0,23.606 19.136,42.743 42.742,42.743 23.606,0 42.742,-19.137 42.742,-42.743 H 32.231 C 32.231,60.543 17.8,74.973 0,74.973 c -17.8,0 -32.231,-14.43 -32.231,-32.231 0,-17.8 14.431,-32.23 32.231,-32.23 z"
              style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
              id="path1516" />
@@ -342,6 +372,7 @@
            id="g1518"
            transform="translate(1445.9412,1575.62)">
           <path
+          class="blink-blue"
              d="m 0,0 c -0.872,0.021 -21.482,0.684 -31.741,13.637 l 8.115,6.427 c 7.23,-9.132 23.728,-9.712 23.895,-9.717 z"
              style="fill:#0732c2;fill-opacity:1;fill-rule:nonzero;stroke:none"
              id="path1520" />
@@ -350,6 +381,7 @@
            id="g1522"
            transform="translate(747.5991,1522.7208)">
           <path
+          class="blink-red"
              d="M 0,0 12.318,-0.063 V -48.422 H 0 Z"
              style="fill:#f7002b;fill-opacity:1;fill-rule:nonzero;stroke:none"
              id="path1524" />
@@ -358,6 +390,7 @@
            id="g1526"
            transform="translate(746.9782,1556.9387)">
           <path
+          class="blink-black"
              d="m 0,0 h 31.214 c 23.606,0 42.742,-18.5 42.742,-41.32 0,-22.821 -19.136,-41.32 -42.742,-41.32 H 0.444 v 10.162 h 30.77 c 17.801,0 32.231,13.95 32.231,31.158 0,17.208 -14.43,31.158 -32.231,31.158 H 0"
              style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
              id="path1528" />
@@ -366,6 +399,7 @@
            id="g1530"
            transform="translate(960.9559,1530.3488)">
           <path
+          class="blink-red"
              d="M 0,0 12.318,-0.07 V -53.265 H 0 Z"
              style="fill:#f7002b;fill-opacity:1;fill-rule:nonzero;stroke:none"
              id="path1532" />
@@ -374,6 +408,7 @@
            id="g1534"
            transform="translate(960.335,1559.7245)">
           <path
+          class="blink-black2"
              d="m 0,0 h 31.214 c 23.606,0 42.742,-18.5 42.742,-41.32 0,-22.821 -19.136,-41.321 -42.742,-41.321 H 0.444 v 10.163 h 30.77 c 17.801,0 32.231,13.95 32.231,31.158 0,17.208 -14.43,31.158 -32.231,31.158 H 0"
              style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
              id="path1536" />