bachir/drupal-quartiersdedemain
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

animation header plus rappide

Browse Source
This commit is contained in:
Ouidade Soussi Chiadmi
2025-12-01 21:45:16 +01:00
parent 6fe9fe1a54
commit fa2352b00f
6 changed files with 52 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
web/themes/custom/quartiers_de_demain/dist/assets/bundle.js vendored
View File

@@ -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';

2
web/themes/custom/quartiers_de_demain/dist/assets/bundle.js.map vendored
View File

File diff suppressed because one or more lines are too long

15
web/themes/custom/quartiers_de_demain/dist/assets/css/bundle.css vendored
View File

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

21
web/themes/custom/quartiers_de_demain/src/assets/js/header.js
View File

@@ -28,7 +28,9 @@ 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';

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

@@ -3,9 +3,12 @@ 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);
transform: scale(2);
@media(max-width:820px) {
transform: scale(1);
}
@@ -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 {
// 0%{
// transform: scale(2);
// }
// 90%{transform: scale(2);}
// 100% {
// transform: scale(1);
// }
// }
@keyframes scale {
0%{
transform: scale(2);
}
100% {
transform: scale(1);
}
}
}
@@ -78,4 +80,6 @@ header{
}
}
}
}

8
web/themes/custom/quartiers_de_demain/src/assets/scss/partials/header.scss
View File

@@ -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 */