animation header plus rappide

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

@@ -808,7 +808,9 @@ document.addEventListener('DOMContentLoaded', function() {
       }
   
     }
-  
+
+
+
     // Appeler la fonction au chargement initial
     checkHeaderCollapse();
   
@@ -826,19 +828,12 @@ document.addEventListener('DOMContentLoaded', function() {
     // 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');
-    //   }, 5000);
-    // }
     } else {
       // Sinon, appliquer la transition après un délai, sauf si scroll
       let collapseTimeout = setTimeout(() => {
         header.classList.add('header--collapsed');
-      }, 2500);
+      }, 2000);
   
       function interruptCollapseOnScroll() {
         if (!header.classList.contains('header--collapsed')) {
@@ -861,7 +856,7 @@ document.addEventListener('DOMContentLoaded', function() {
         { transform: 'translateX(0)' },
         { transform: 'translateX(-100%)' }
       ], {
-        duration: 200,
+        duration: 300,
         fill: 'forwards'
       });
       isHidden = true;
@@ -872,7 +867,7 @@ document.addEventListener('DOMContentLoaded', function() {
         { transform: 'translateX(-100%)' },
         { transform: 'translateX(0)' }
       ], {
-        duration: 200,
+        duration: 300,
         fill: 'forwards'
       });
       isHidden = false;
@@ -884,7 +879,7 @@ document.addEventListener('DOMContentLoaded', function() {
         { transform: 'translateY(0%)' },
         { transform: 'translateY(+100%)' }
       ], {
-        duration: 200,
+        duration: 300,
         fill: 'forwards'
       });
       isHidden = false;
@@ -895,7 +890,7 @@ document.addEventListener('DOMContentLoaded', function() {
         { transform: 'translateY(100%)' },
         { transform: 'translateY(0%)' }
       ], {
-        duration: 200,
+        duration: 300,
         fill: 'forwards'
       }).onfinish = function() {
         // headerNavContainer.style.display = 'none';

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

@@ -267,7 +267,7 @@ header[role=banner] {
   max-width: 100vw;
   position: fixed;
   top: 0;
-  transition: height 5s ease-in-out, width 5s ease-in-out;
+  transition: height 0.5s ease-in-out, width 0.5s ease-in-out;
 }
 header[role=banner] .language-switcher-language-url {
   text-transform: uppercase;
@@ -2044,6 +2044,9 @@ footer {
 
 header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-header {
   opacity: 0;
+  animation-delay: 0.9s;
+  animation-name: scale;
+  animation-duration: 2.8s;
 }
 header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-header.animated {
   opacity: 1;
@@ -2074,7 +2077,7 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
 }
 header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-header.animated .blink-black2 {
   opacity: 0;
-  animation-delay: 1s;
+  animation-delay: 0.7s;
   animation-name: blink;
   animation-duration: 5s;
 }
@@ -2100,6 +2103,14 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
     transform: translateX(600px);
   }
 }
+@keyframes scale {
+  0% {
+    transform: scale(2);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
 
 #home #background-animated {
   position: absolute;