animation header plus rappide

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

@@ -809,6 +809,8 @@ 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;

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

@@ -29,6 +29,8 @@ document.addEventListener('DOMContentLoaded', function() {
   
     }
 
+
+
     // Appeler la fonction au chargement initial
     checkHeaderCollapse();
   
@@ -46,19 +48,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')) {
@@ -81,7 +76,7 @@ document.addEventListener('DOMContentLoaded', function() {
         { transform: 'translateX(0)' },
         { transform: 'translateX(-100%)' }
       ], {
-        duration: 200,
+        duration: 300,
         fill: 'forwards'
       });
       isHidden = true;
@@ -92,7 +87,7 @@ document.addEventListener('DOMContentLoaded', function() {
         { transform: 'translateX(-100%)' },
         { transform: 'translateX(0)' }
       ], {
-        duration: 200,
+        duration: 300,
         fill: 'forwards'
       });
       isHidden = false;
@@ -104,7 +99,7 @@ document.addEventListener('DOMContentLoaded', function() {
         { transform: 'translateY(0%)' },
         { transform: 'translateY(+100%)' }
       ], {
-        duration: 200,
+        duration: 300,
         fill: 'forwards'
       });
       isHidden = false;
@@ -115,7 +110,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/src/assets/scss/partials/animation-logo-header.scss

@@ -3,6 +3,9 @@ header{
         .field_field_logo{
             .qdd-header{
                 opacity: 0;
+                animation-delay: 0.9s;
+                animation-name: scale;
+                animation-duration: 2.8s;
                 &.animated{
                     opacity: 1;
                     transform: scale(2); 
@@ -33,7 +36,7 @@ header{
     
                     .blink-black2 {
                         opacity: 0;
-                        animation-delay: 1s;
+                        animation-delay: 0.7s;
                         animation-name: blink;
                         animation-duration: 5s;
                     }
@@ -62,15 +65,14 @@ header{
                         }
                     } 
 
-                    // @keyframes scale {
+                    @keyframes scale {
-                    //     0%{
+                        0%{
-                    //         transform: scale(2);
+                            transform: scale(2);
-                    //     }
+                        }
-                    //     90%{transform: scale(2);}
+                        100% {
-                    //     100% {
+                            transform: scale(1);
-                    //         transform: scale(1);
+                        }
-                    //     }
+                    }
-                    // }
     
                            
                 }
@@ -79,3 +81,5 @@ header{
         }
     }
 }
+
+

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

@@ -8,9 +8,9 @@ header[role="banner"]{
     position: fixed;
     top: 0;
     // transition: none;
-    transition: height 5s ease-in-out, width 5s ease-in-out;
+    transition: height 0.5s ease-in-out, width 0.5s ease-in-out;
     // transition: height 2s ease-in-out, width 2s ease-in-out; /* Transition pour le changement de taille */
-    // transition: height 0.3s, padding 0.3s; /* Add transition for smooth resizing */
+    // transition: height 1s, padding 1s; /* Add transition for smooth resizing */
     
     .language-switcher-language-url{
         text-transform: uppercase;
@@ -307,6 +307,10 @@ header[role="banner"]{
         height: 170px;
        }
 }
+
+
+
+
 /* Taille définitive du header après l'animation */
 header[role="banner"].header--collapsed {
     height: $header-height; /* Ou la hauteur que vous souhaitez pour votre header */