premier jet animation header

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,13 +105,16 @@
     // 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');

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

@@ -218,4 +218,16 @@ header{
         transform-origin: bottom right; /* Origine de la transformation à l'angle bas droit */
     }
 
-}
+}
+// /* 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";