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

anim header

Browse Source
This commit is contained in:
Ouidade Soussi Chiadmi
2025-12-01 23:29:54 +01:00
parent ff4fabba70
commit 04a47789f7
6 changed files with 925 additions and 530 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -785,194 +785,288 @@ document.addEventListener('keydown', (e) => {
/*!*********************************!*\
!*** ./src/assets/js/header.js ***!
\*********************************/
//////// start header ////////////
// // //////// start header ////////////
// // document.addEventListener('DOMContentLoaded', function() {
// // const header = document.querySelector('header[role="banner"]');
// // 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)');
// // const headerNavContainer = document.querySelector('.header_nav_container');
// // const isFirstLoad = !performance.getEntriesByType("navigation")[0].type.includes('back_forward');
// // const isTargetPath = window.location.pathname === '/';
// // // 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 if (header.classList.contains('header--collapsed-already')) {
// // 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 });
// // // 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');
// // stopLogoAnimation();
// // } else {
// // // Sinon, appliquer la transition après un délai, sauf si scroll
// // let collapseTimeout = setTimeout(() => {
// // header.classList.add('header--collapsed');
// // }, 1000);
// // function interruptCollapseOnScroll() {
// // if (!header.classList.contains('header--collapsed')) {
// // clearTimeout(collapseTimeout); // annule l'animation
// // header.classList.add('header--collapsed');
// // }
// // window.removeEventListener('scroll', interruptCollapseOnScroll); // une seule fois
// // }
// // window.addEventListener('scroll', interruptCollapseOnScroll);
// // }
// // //////////////////////////////////////
// // let lastScrollTop = 0;
// // let threshold = 100; // Change this value as needed
// // let isHidden = false;
// // function slideOut() {
// // headerNavContainer.animate([
// // { transform: 'translateX(0)' },
// // { transform: 'translateX(-100%)' }
// // ], {
// // duration: 300,
// // fill: 'forwards'
// // });
// // isHidden = true;
// // }
// // function slideIn() {
// // headerNavContainer.animate([
// // { transform: 'translateX(-100%)' },
// // { transform: 'translateX(0)' }
// // ], {
// // duration: 300,
// // fill: 'forwards'
// // });
// // isHidden = false;
// // }
// // function slideDown() {
// // // headerNavContainer.style.display = 'block';
// // headerNavContainer.animate([
// // { transform: 'translateY(0%)' },
// // { transform: 'translateY(+100%)' }
// // ], {
// // duration: 300,
// // fill: 'forwards'
// // });
// // isHidden = false;
// // }
// // function slideUp() {
// // headerNavContainer.animate([
// // { transform: 'translateY(100%)' },
// // { transform: 'translateY(0%)' }
// // ], {
// // duration: 300,
// // fill: 'forwards'
// // }).onfinish = function() {
// // // headerNavContainer.style.display = 'none';
// // };
// // isHidden = true;
// // }
// // // Fonction pour ajuster la hauteur du header lors du défilement
// // function adjustHeaderHeight() {
// // if (window.scrollY > 0) {
// // header.classList.add('shrink');
// // } else {
// // header.classList.remove('shrink');
// // }
// // }
// // function handleScroll() {
// // let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
// // const isMobile = window.innerWidth < 811;
// // if (scrollTop > threshold && !isHidden) {
// // if (isMobile) {
// // slideUp();
// // } else {
// // slideOut();
// // }
// // } else if (scrollTop <= threshold && isHidden) {
// // if (isMobile) {
// // slideDown();
// // } else {
// // slideIn();
// // }
// // }
// // lastScrollTop = scrollTop <= 0 ? 0 : scrollTop; // For Mobile or negative scrolling
// // }
// // function handleTouchAndMouseEnter() {
// // if (isHidden) {
// // if (window.innerWidth < 811) {
// // slideDown();
// // } else {
// // slideIn();
// // }
// // }
// // }
// // function handleTouchAndMouseLeave() {
// // if (lastScrollTop > threshold && !isHidden) {
// // if (window.innerWidth < 811) {
// // slideUp();
// // } else {
// // slideOut();
// // }
// // }
// // }
// // window.addEventListener('scroll', handleScroll);
// // window.addEventListener('scroll', adjustHeaderHeight);
// // // Mouse events for desktop
// // header.addEventListener('mouseenter', handleTouchAndMouseEnter);
// // header.addEventListener('mouseleave', handleTouchAndMouseLeave);
// // // Touch events for tablets and mobile devices
// // header.addEventListener('touchstart', handleTouchAndMouseEnter);
// // header.addEventListener('touchend', handleTouchAndMouseLeave);
// // // Initial check to see if we're at the top of the page
// // if (window.pageYOffset <= threshold) {
// // if (window.innerWidth < 811) {
// // slideDown();
// // } else {
// // slideIn();
// // }
// // } else {
// // if (window.innerWidth < 811) {
// // slideUp();
// // } else {
// // slideIn();
// // }
// // }
// // });
// // //////// end header ////////////
///////////////start header sans animation logo////////////////
document.addEventListener('DOMContentLoaded', function() {
const header = document.querySelector('header[role="banner"]');
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)');
const headerNavContainer = document.querySelector('.header_nav_container');
const isFirstLoad = !performance.getEntriesByType("navigation")[0].type.includes('back_forward');
const isTargetPath = window.location.pathname === '/';
// 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 if (header.classList.contains('header--collapsed-already')) {
stopLogoAnimation();
} else {
startLogoAnimation();
}
}
const header = document.querySelector('header[role="banner"]');
const logo = document.querySelector('#block-quartiers-de-demain-logoquartiersdedemain svg');
const headerNavContainer = document.querySelector('.header_nav_container');
const navEntry = performance.getEntriesByType("navigation")[0];
const isFirstLoad = !navEntry.type.includes('back_forward');
const isTargetPath = window.location.pathname === '/';
const isMobile = window.innerWidth < 811; // 🔹 breakpoint mobile
const threshold = 100;
let lastScrollTop = 0;
let isHidden = false;
let introDone = false; // ✅ on saura quand l'intro est finie
// 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();
}
});
// 🔹 On cache la nav au tout début (pour éviter toute secousse)
if (headerNavContainer) {
headerNavContainer.style.visibility = 'hidden';
}
/* -------------------
Animations nav
------------------- */
function slideOut() {
headerNavContainer.animate([
{ transform: 'translateX(0)' },
{ transform: 'translateX(-100%)' }
], {
duration: 300,
fill: 'forwards'
});
observer.observe(header, { attributes: true });
// 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');
stopLogoAnimation();
} else {
// Sinon, appliquer la transition après un délai, sauf si scroll
let collapseTimeout = setTimeout(() => {
header.classList.add('header--collapsed');
}, 2000);
function interruptCollapseOnScroll() {
if (!header.classList.contains('header--collapsed')) {
clearTimeout(collapseTimeout); // annule l'animation
header.classList.add('header--collapsed');
}
window.removeEventListener('scroll', interruptCollapseOnScroll); // une seule fois
}
window.addEventListener('scroll', interruptCollapseOnScroll);
}
//////////////////////////////////////
let lastScrollTop = 0;
let threshold = 100; // Change this value as needed
let isHidden = false;
function slideOut() {
headerNavContainer.animate([
{ transform: 'translateX(0)' },
{ transform: 'translateX(-100%)' }
], {
duration: 300,
fill: 'forwards'
});
isHidden = true;
}
function slideIn() {
headerNavContainer.animate([
{ transform: 'translateX(-100%)' },
{ transform: 'translateX(0)' }
], {
duration: 300,
fill: 'forwards'
});
isHidden = false;
}
function slideDown() {
// headerNavContainer.style.display = 'block';
headerNavContainer.animate([
{ transform: 'translateY(0%)' },
{ transform: 'translateY(+100%)' }
], {
duration: 300,
fill: 'forwards'
});
isHidden = false;
}
function slideUp() {
headerNavContainer.animate([
{ transform: 'translateY(100%)' },
{ transform: 'translateY(0%)' }
], {
duration: 300,
fill: 'forwards'
}).onfinish = function() {
// headerNavContainer.style.display = 'none';
};
isHidden = true;
}
// Fonction pour ajuster la hauteur du header lors du défilement
function adjustHeaderHeight() {
if (window.scrollY > 0) {
header.classList.add('shrink');
} else {
header.classList.remove('shrink');
}
}
function handleScroll() {
let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
const isMobile = window.innerWidth < 811;
if (scrollTop > threshold && !isHidden) {
if (isMobile) {
slideUp();
} else {
slideOut();
}
} else if (scrollTop <= threshold && isHidden) {
if (isMobile) {
slideDown();
} else {
slideIn();
}
}
lastScrollTop = scrollTop <= 0 ? 0 : scrollTop; // For Mobile or negative scrolling
}
function handleTouchAndMouseEnter() {
if (isHidden) {
if (window.innerWidth < 811) {
slideDown();
} else {
slideIn();
}
}
}
function handleTouchAndMouseLeave() {
if (lastScrollTop > threshold && !isHidden) {
if (window.innerWidth < 811) {
slideUp();
} else {
slideOut();
}
}
}
window.addEventListener('scroll', handleScroll);
window.addEventListener('scroll', adjustHeaderHeight);
// Mouse events for desktop
header.addEventListener('mouseenter', handleTouchAndMouseEnter);
header.addEventListener('mouseleave', handleTouchAndMouseLeave);
// Touch events for tablets and mobile devices
header.addEventListener('touchstart', handleTouchAndMouseEnter);
header.addEventListener('touchend', handleTouchAndMouseLeave);
// Initial check to see if we're at the top of the page
isHidden = true;
}
function slideIn() {
headerNavContainer.animate([
{ transform: 'translateX(-100%)' },
{ transform: 'translateX(0)' }
], {
duration: 300,
fill: 'forwards'
});
isHidden = false;
}
function slideDown() {
headerNavContainer.animate([
{ transform: 'translateY(0%)' },
{ transform: 'translateY(+100%)' }
], {
duration: 300,
fill: 'forwards'
});
isHidden = false;
}
function slideUp() {
headerNavContainer.animate([
{ transform: 'translateY(100%)' },
{ transform: 'translateY(0%)' }
], {
duration: 300,
fill: 'forwards'
}).onfinish = function() {};
isHidden = true;
}
// ✅ Position initiale de la nav,
// appelée UNIQUEMENT après la fin de l'intro
function initNavPosition() {
if (window.pageYOffset <= threshold) {
if (window.innerWidth < 811) {
slideDown();
} else {
} else {
slideIn();
}
}
} else {
if (window.innerWidth < 811) {
slideUp();
@@ -980,11 +1074,132 @@ document.addEventListener('DOMContentLoaded', function() {
slideIn();
}
}
});
//////// end header ////////////
}
/* -------------------
Scroll / resize header
------------------- */
function adjustHeaderHeight() {
if (window.scrollY > 0) {
header.classList.add('shrink');
} else {
header.classList.remove('shrink');
}
}
function handleScroll() {
if (!introDone) return; // ⛔ rien tant que l'intro n'est pas finie
let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
const isMobile = window.innerWidth < 811;
if (scrollTop > threshold && !isHidden) {
if (isMobile) {
slideUp();
} else {
slideOut();
}
} else if (scrollTop <= threshold && isHidden) {
if (isMobile) {
slideDown();
} else {
slideIn();
}
}
lastScrollTop = scrollTop <= 0 ? 0 : scrollTop;
}
function handleTouchAndMouseEnter() {
if (!introDone) return; // ⛔ pas de hover avant la fin de l'intro
if (isHidden) {
if (window.innerWidth < 811) {
slideDown();
} else {
slideIn();
}
}
}
function handleTouchAndMouseLeave() {
if (!introDone) return;
if (lastScrollTop > threshold && !isHidden) {
if (window.innerWidth < 811) {
slideUp();
} else {
slideOut();
}
}
}
window.addEventListener('scroll', handleScroll);
window.addEventListener('scroll', adjustHeaderHeight);
header.addEventListener('mouseenter', handleTouchAndMouseEnter);
header.addEventListener('mouseleave', handleTouchAndMouseLeave);
header.addEventListener('touchstart', handleTouchAndMouseEnter);
header.addEventListener('touchend', handleTouchAndMouseLeave);
/* -------------------
Intro du logo
------------------- */
if (isFirstLoad && isTargetPath && logo && !isMobile) {
// On bloque le scroll
document.body.classList.add('logo-intro-animating');
// 1) Logo plein écran SANS ANIMATION + header figé
logo.style.transition = 'none';
header.style.transition = 'none';
document.body.classList.add('logo-intro-active'); // logo centré, scale(2)
void logo.offsetWidth; // reflow
const INTRO_DELAY = 1000; // temps où le logo reste plein écran
const TRANSITION_DURATION = 1000; // durée de l'anim de collapse
// 2) Après ce délai : on réactive les transitions et on lance l'anim
setTimeout(() => {
logo.style.transition = '';
header.style.transition = '';
header.classList.add('header--collapsed'); // header se rétracte
document.body.classList.remove('logo-intro-active'); // logo retourne dans le header
// 3) Quand le header + logo ont fini de bouger :
setTimeout(() => {
document.body.classList.remove('logo-intro-animating');
introDone = true;
// 👉 maintenant seulement on affiche la nav et on la fait glisser
if (headerNavContainer) {
headerNavContainer.style.visibility = 'visible';
}
initNavPosition();
}, TRANSITION_DURATION + 100);
}, INTRO_DELAY);
} else {
// 🔹 CAS MOBILE OU PAS HOME / PAS 1re LOAD :
// pas d'intro : header direct réduit, nav directement dispo
header.classList.add('header--collapsed-already');
introDone = true;
if (headerNavContainer) {
headerNavContainer.style.visibility = 'visible';
}
initNavPosition();
}
});
///////////////end header sans animation logo////////////////
}();
// This entry need to be wrapped in an IIFE because it need to be isolated against other entry modules.
!function() {

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

201
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 0.5s ease-in-out, width 0.5s ease-in-out;
transition: height 1.4s ease-in-out, width 1.4s ease-in-out;
}
header[role=banner] .language-switcher-language-url {
text-transform: uppercase;
@@ -313,8 +313,8 @@ header[role=banner] .header_left_container {
flex: 0 0 100%;
display: flex;
flex-direction: row;
transition: height 2s ease-in-out, width 2s ease-in-out; /* Transition pour le changement de taille */
background-color: rgb(255, 255, 255);
transition: flex-basis 0.9s ease-in-out, width 0.9s ease-in-out;
}
header[role=banner] .header_left_container img {
display: none;
@@ -445,7 +445,7 @@ header[role=banner] .header_nav_container {
background: rgb(7, 50, 194);
text-align: center;
transform: translateX(0);
transition: transform 0.3s ease-in-out;
transition: flex-basis 0.9s ease-in-out, width 0.9s ease-in-out, transform 0.3s ease-in-out;
z-index: -1;
display: flex;
flex-direction: column;
@@ -558,7 +558,7 @@ header[role=banner].header--collapsed {
height: 200px; /* Ou la hauteur que vous souhaitez pour votre header */
width: 35%;
transform-origin: bottom right;
transition: all 1s ease-in-out;
transition: all 1.4s ease-in-out;
}
@media (max-width: 1090px) {
header[role=banner].header--collapsed {
@@ -580,7 +580,7 @@ header[role=banner].header--collapsed .qdd-header {
}
}
header[role=banner].header--collapsed .header_left_container {
flex: 1 0 65%;
flex-basis: 65%;
transform-origin: bottom right;
}
@media (max-width: 810px) {
@@ -589,7 +589,7 @@ header[role=banner].header--collapsed .header_left_container {
}
}
header[role=banner].header--collapsed .header_nav_container {
flex: 0 0 30%;
flex-basis: 30%;
transform-origin: bottom right;
min-width: fit-content;
}
@@ -621,7 +621,7 @@ header[role=banner].header--collapsed-already .qdd-header {
}
}
header[role=banner].header--collapsed-already .header_left_container {
flex: 1 0 65%;
flex-basis: 65%;
transform-origin: bottom right;
}
@media (max-width: 810px) {
@@ -630,7 +630,7 @@ header[role=banner].header--collapsed-already .header_left_container {
}
}
header[role=banner].header--collapsed-already .header_nav_container {
flex: 0 0 30%;
flex-basis: 30%;
min-width: fit-content;
transform-origin: bottom right;
}
@@ -647,6 +647,49 @@ header[role=banner].header--collapsed-already .header_nav_container {
}
}
/* Empêcher le scroll pendant l'intro */
body.logo-intro-animating {
overflow: hidden;
}
/* Header plein écran au tout début */
body.logo-intro-active header[role=banner] {
height: 100vh;
width: 100%;
}
/* État normal du SVG (dans le header) */
#block-quartiers-de-demain-logoquartiersdedemain svg {
position: relative;
top: auto;
left: auto;
transform: none;
transform-origin: center center;
transition: transform 1.4s ease-in-out, top 1.4s ease-in-out, left 1.4s ease-in-out;
}
/* État intro : logo centré, scale(2) */
body.logo-intro-active #block-quartiers-de-demain-logoquartiersdedemain svg {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(2);
z-index: 9999;
}
/* Pendant l'intro : même si le header est "collapsed",
on garde TOUT l'espace pour le bloc gauche,
la nav ne prend AUCUNE place (0%) */
body.logo-intro-animating header[role=banner].header--collapsed .header_left_container {
flex: 0 0 100%;
}
body.logo-intro-animating header[role=banner].header--collapsed .header_nav_container {
flex: 0 0 0%;
width: 0;
overflow: hidden;
}
footer {
z-index: 100;
}
@@ -1063,78 +1106,6 @@ footer {
order: 5;
}
#logo-animated-container {
width: 60%;
margin-left: 20%;
margin-right: 20%;
}
@media (max-width: 810px) {
#logo-animated-container {
width: 74%;
margin-left: 13%;
margin-right: 13%;
}
}
@media (max-width: 640px) {
#logo-animated-container {
width: 80%;
margin-left: 10%;
margin-right: 10%;
}
}
#logo-animated {
position: relative;
top: 0;
left: 0;
width: 100%;
max-width: 1300px;
max-height: 1000px;
overflow: hidden;
}
#logo-animated svg {
position: absolute;
width: 100%;
height: auto;
max-width: 1030px;
top: 0;
left: 0;
}
#logo-animated img {
position: absolute;
opacity: 0;
}
#consultation-couleur {
left: min(17%, 180px);
top: 0.5%;
width: 32%;
max-width: 330px;
}
#consultation-noir {
left: min(17%, 180px);
top: 0.5%;
width: 32%;
max-width: 330px;
}
#quartier-couleur {
width: 60%;
max-width: 620px;
left: min(30%, 310px);
top: 3%;
}
#quartier-noir {
width: 60%;
max-width: 620px;
left: min(30%, 310px);
top: 3%;
}
/* Slider */
.slick-loading .slick-list {
background: #fff url("./ajax-loader.gif") center center no-repeat;
@@ -2042,76 +2013,6 @@ footer {
height: 25px;
}
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;
transform: scale(2);
}
@media (max-width: 820px) {
header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-header.animated {
transform: scale(1);
}
}
header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-header.animated .blink-blue {
opacity: 0;
animation-delay: 0.1s;
animation-name: blink;
animation-duration: 5s;
}
header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-header.animated .blink-red {
opacity: 0;
animation-delay: 0.3s;
animation-name: blink;
animation-duration: 5s;
}
header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-header.animated .blink-black {
opacity: 0;
animation-delay: 0.5s;
animation-name: blink;
animation-duration: 5s;
}
header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-header.animated .blink-black2 {
opacity: 0;
animation-delay: 0.7s;
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: 0.5s;
animation-duration: 1s;
}
@keyframes slideIn {
0% {
transform: translateX(0px);
}
100% {
transform: translateX(600px);
}
}
@keyframes scale {
0% {
transform: scale(2);
}
100% {
transform: scale(1);
}
}
#home #background-animated {
position: absolute;
top: 1500px;

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

@@ -1,191 +1,285 @@
//////// start header ////////////
// // //////// start header ////////////
// // document.addEventListener('DOMContentLoaded', function() {
// // const header = document.querySelector('header[role="banner"]');
// // 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)');
// // const headerNavContainer = document.querySelector('.header_nav_container');
// // const isFirstLoad = !performance.getEntriesByType("navigation")[0].type.includes('back_forward');
// // const isTargetPath = window.location.pathname === '/';
// // // 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 if (header.classList.contains('header--collapsed-already')) {
// // 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 });
// // // 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');
// // stopLogoAnimation();
// // } else {
// // // Sinon, appliquer la transition après un délai, sauf si scroll
// // let collapseTimeout = setTimeout(() => {
// // header.classList.add('header--collapsed');
// // }, 1000);
// // function interruptCollapseOnScroll() {
// // if (!header.classList.contains('header--collapsed')) {
// // clearTimeout(collapseTimeout); // annule l'animation
// // header.classList.add('header--collapsed');
// // }
// // window.removeEventListener('scroll', interruptCollapseOnScroll); // une seule fois
// // }
// // window.addEventListener('scroll', interruptCollapseOnScroll);
// // }
// // //////////////////////////////////////
// // let lastScrollTop = 0;
// // let threshold = 100; // Change this value as needed
// // let isHidden = false;
// // function slideOut() {
// // headerNavContainer.animate([
// // { transform: 'translateX(0)' },
// // { transform: 'translateX(-100%)' }
// // ], {
// // duration: 300,
// // fill: 'forwards'
// // });
// // isHidden = true;
// // }
// // function slideIn() {
// // headerNavContainer.animate([
// // { transform: 'translateX(-100%)' },
// // { transform: 'translateX(0)' }
// // ], {
// // duration: 300,
// // fill: 'forwards'
// // });
// // isHidden = false;
// // }
// // function slideDown() {
// // // headerNavContainer.style.display = 'block';
// // headerNavContainer.animate([
// // { transform: 'translateY(0%)' },
// // { transform: 'translateY(+100%)' }
// // ], {
// // duration: 300,
// // fill: 'forwards'
// // });
// // isHidden = false;
// // }
// // function slideUp() {
// // headerNavContainer.animate([
// // { transform: 'translateY(100%)' },
// // { transform: 'translateY(0%)' }
// // ], {
// // duration: 300,
// // fill: 'forwards'
// // }).onfinish = function() {
// // // headerNavContainer.style.display = 'none';
// // };
// // isHidden = true;
// // }
// // // Fonction pour ajuster la hauteur du header lors du défilement
// // function adjustHeaderHeight() {
// // if (window.scrollY > 0) {
// // header.classList.add('shrink');
// // } else {
// // header.classList.remove('shrink');
// // }
// // }
// // function handleScroll() {
// // let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
// // const isMobile = window.innerWidth < 811;
// // if (scrollTop > threshold && !isHidden) {
// // if (isMobile) {
// // slideUp();
// // } else {
// // slideOut();
// // }
// // } else if (scrollTop <= threshold && isHidden) {
// // if (isMobile) {
// // slideDown();
// // } else {
// // slideIn();
// // }
// // }
// // lastScrollTop = scrollTop <= 0 ? 0 : scrollTop; // For Mobile or negative scrolling
// // }
// // function handleTouchAndMouseEnter() {
// // if (isHidden) {
// // if (window.innerWidth < 811) {
// // slideDown();
// // } else {
// // slideIn();
// // }
// // }
// // }
// // function handleTouchAndMouseLeave() {
// // if (lastScrollTop > threshold && !isHidden) {
// // if (window.innerWidth < 811) {
// // slideUp();
// // } else {
// // slideOut();
// // }
// // }
// // }
// // window.addEventListener('scroll', handleScroll);
// // window.addEventListener('scroll', adjustHeaderHeight);
// // // Mouse events for desktop
// // header.addEventListener('mouseenter', handleTouchAndMouseEnter);
// // header.addEventListener('mouseleave', handleTouchAndMouseLeave);
// // // Touch events for tablets and mobile devices
// // header.addEventListener('touchstart', handleTouchAndMouseEnter);
// // header.addEventListener('touchend', handleTouchAndMouseLeave);
// // // Initial check to see if we're at the top of the page
// // if (window.pageYOffset <= threshold) {
// // if (window.innerWidth < 811) {
// // slideDown();
// // } else {
// // slideIn();
// // }
// // } else {
// // if (window.innerWidth < 811) {
// // slideUp();
// // } else {
// // slideIn();
// // }
// // }
// // });
// // //////// end header ////////////
///////////////start header sans animation logo////////////////
document.addEventListener('DOMContentLoaded', function() {
const header = document.querySelector('header[role="banner"]');
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)');
const headerNavContainer = document.querySelector('.header_nav_container');
const isFirstLoad = !performance.getEntriesByType("navigation")[0].type.includes('back_forward');
const isTargetPath = window.location.pathname === '/';
// 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 if (header.classList.contains('header--collapsed-already')) {
stopLogoAnimation();
} else {
startLogoAnimation();
}
}
const header = document.querySelector('header[role="banner"]');
const logo = document.querySelector('#block-quartiers-de-demain-logoquartiersdedemain svg');
const headerNavContainer = document.querySelector('.header_nav_container');
const navEntry = performance.getEntriesByType("navigation")[0];
const isFirstLoad = !navEntry.type.includes('back_forward');
const isTargetPath = window.location.pathname === '/';
const isMobile = window.innerWidth < 811; // 🔹 breakpoint mobile
const threshold = 100;
let lastScrollTop = 0;
let isHidden = false;
let introDone = false; // ✅ on saura quand l'intro est finie
// 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();
}
});
// 🔹 On cache la nav au tout début (pour éviter toute secousse)
if (headerNavContainer) {
headerNavContainer.style.visibility = 'hidden';
}
/* -------------------
Animations nav
------------------- */
function slideOut() {
headerNavContainer.animate([
{ transform: 'translateX(0)' },
{ transform: 'translateX(-100%)' }
], {
duration: 300,
fill: 'forwards'
});
observer.observe(header, { attributes: true });
// 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');
stopLogoAnimation();
} else {
// Sinon, appliquer la transition après un délai, sauf si scroll
let collapseTimeout = setTimeout(() => {
header.classList.add('header--collapsed');
}, 2000);
function interruptCollapseOnScroll() {
if (!header.classList.contains('header--collapsed')) {
clearTimeout(collapseTimeout); // annule l'animation
header.classList.add('header--collapsed');
}
window.removeEventListener('scroll', interruptCollapseOnScroll); // une seule fois
}
window.addEventListener('scroll', interruptCollapseOnScroll);
}
//////////////////////////////////////
let lastScrollTop = 0;
let threshold = 100; // Change this value as needed
let isHidden = false;
function slideOut() {
headerNavContainer.animate([
{ transform: 'translateX(0)' },
{ transform: 'translateX(-100%)' }
], {
duration: 300,
fill: 'forwards'
});
isHidden = true;
}
function slideIn() {
headerNavContainer.animate([
{ transform: 'translateX(-100%)' },
{ transform: 'translateX(0)' }
], {
duration: 300,
fill: 'forwards'
});
isHidden = false;
}
function slideDown() {
// headerNavContainer.style.display = 'block';
headerNavContainer.animate([
{ transform: 'translateY(0%)' },
{ transform: 'translateY(+100%)' }
], {
duration: 300,
fill: 'forwards'
});
isHidden = false;
}
function slideUp() {
headerNavContainer.animate([
{ transform: 'translateY(100%)' },
{ transform: 'translateY(0%)' }
], {
duration: 300,
fill: 'forwards'
}).onfinish = function() {
// headerNavContainer.style.display = 'none';
};
isHidden = true;
}
// Fonction pour ajuster la hauteur du header lors du défilement
function adjustHeaderHeight() {
if (window.scrollY > 0) {
header.classList.add('shrink');
} else {
header.classList.remove('shrink');
}
}
function handleScroll() {
let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
const isMobile = window.innerWidth < 811;
if (scrollTop > threshold && !isHidden) {
if (isMobile) {
slideUp();
} else {
slideOut();
}
} else if (scrollTop <= threshold && isHidden) {
if (isMobile) {
slideDown();
} else {
slideIn();
}
}
lastScrollTop = scrollTop <= 0 ? 0 : scrollTop; // For Mobile or negative scrolling
}
function handleTouchAndMouseEnter() {
if (isHidden) {
if (window.innerWidth < 811) {
slideDown();
} else {
slideIn();
}
}
}
function handleTouchAndMouseLeave() {
if (lastScrollTop > threshold && !isHidden) {
if (window.innerWidth < 811) {
slideUp();
} else {
slideOut();
}
}
}
window.addEventListener('scroll', handleScroll);
window.addEventListener('scroll', adjustHeaderHeight);
// Mouse events for desktop
header.addEventListener('mouseenter', handleTouchAndMouseEnter);
header.addEventListener('mouseleave', handleTouchAndMouseLeave);
// Touch events for tablets and mobile devices
header.addEventListener('touchstart', handleTouchAndMouseEnter);
header.addEventListener('touchend', handleTouchAndMouseLeave);
// Initial check to see if we're at the top of the page
isHidden = true;
}
function slideIn() {
headerNavContainer.animate([
{ transform: 'translateX(-100%)' },
{ transform: 'translateX(0)' }
], {
duration: 300,
fill: 'forwards'
});
isHidden = false;
}
function slideDown() {
headerNavContainer.animate([
{ transform: 'translateY(0%)' },
{ transform: 'translateY(+100%)' }
], {
duration: 300,
fill: 'forwards'
});
isHidden = false;
}
function slideUp() {
headerNavContainer.animate([
{ transform: 'translateY(100%)' },
{ transform: 'translateY(0%)' }
], {
duration: 300,
fill: 'forwards'
}).onfinish = function() {};
isHidden = true;
}
// ✅ Position initiale de la nav,
// appelée UNIQUEMENT après la fin de l'intro
function initNavPosition() {
if (window.pageYOffset <= threshold) {
if (window.innerWidth < 811) {
slideDown();
} else {
} else {
slideIn();
}
}
} else {
if (window.innerWidth < 811) {
slideUp();
@@ -193,8 +287,129 @@ document.addEventListener('DOMContentLoaded', function() {
slideIn();
}
}
});
//////// end header ////////////
}
/* -------------------
Scroll / resize header
------------------- */
function adjustHeaderHeight() {
if (window.scrollY > 0) {
header.classList.add('shrink');
} else {
header.classList.remove('shrink');
}
}
function handleScroll() {
if (!introDone) return; // ⛔ rien tant que l'intro n'est pas finie
let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
const isMobile = window.innerWidth < 811;
if (scrollTop > threshold && !isHidden) {
if (isMobile) {
slideUp();
} else {
slideOut();
}
} else if (scrollTop <= threshold && isHidden) {
if (isMobile) {
slideDown();
} else {
slideIn();
}
}
lastScrollTop = scrollTop <= 0 ? 0 : scrollTop;
}
function handleTouchAndMouseEnter() {
if (!introDone) return; // ⛔ pas de hover avant la fin de l'intro
if (isHidden) {
if (window.innerWidth < 811) {
slideDown();
} else {
slideIn();
}
}
}
function handleTouchAndMouseLeave() {
if (!introDone) return;
if (lastScrollTop > threshold && !isHidden) {
if (window.innerWidth < 811) {
slideUp();
} else {
slideOut();
}
}
}
window.addEventListener('scroll', handleScroll);
window.addEventListener('scroll', adjustHeaderHeight);
header.addEventListener('mouseenter', handleTouchAndMouseEnter);
header.addEventListener('mouseleave', handleTouchAndMouseLeave);
header.addEventListener('touchstart', handleTouchAndMouseEnter);
header.addEventListener('touchend', handleTouchAndMouseLeave);
/* -------------------
Intro du logo
------------------- */
if (isFirstLoad && isTargetPath && logo && !isMobile) {
// On bloque le scroll
document.body.classList.add('logo-intro-animating');
// 1) Logo plein écran SANS ANIMATION + header figé
logo.style.transition = 'none';
header.style.transition = 'none';
document.body.classList.add('logo-intro-active'); // logo centré, scale(2)
void logo.offsetWidth; // reflow
const INTRO_DELAY = 1000; // temps où le logo reste plein écran
const TRANSITION_DURATION = 1000; // durée de l'anim de collapse
// 2) Après ce délai : on réactive les transitions et on lance l'anim
setTimeout(() => {
logo.style.transition = '';
header.style.transition = '';
header.classList.add('header--collapsed'); // header se rétracte
document.body.classList.remove('logo-intro-active'); // logo retourne dans le header
// 3) Quand le header + logo ont fini de bouger :
setTimeout(() => {
document.body.classList.remove('logo-intro-animating');
introDone = true;
// 👉 maintenant seulement on affiche la nav et on la fait glisser
if (headerNavContainer) {
headerNavContainer.style.visibility = 'visible';
}
initNavPosition();
}, TRANSITION_DURATION + 100);
}, INTRO_DELAY);
} else {
// 🔹 CAS MOBILE OU PAS HOME / PAS 1re LOAD :
// pas d'intro : header direct réduit, nav directement dispo
header.classList.add('header--collapsed-already');
introDone = true;
if (headerNavContainer) {
headerNavContainer.style.visibility = 'visible';
}
initNavPosition();
}
});
///////////////end header sans animation logo////////////////

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

@@ -8,10 +8,12 @@ header[role="banner"]{
position: fixed;
top: 0;
// transition: none;
transition: height 0.5s ease-in-out, width 0.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 1s, padding 1s; /* Add transition for smooth resizing */
transition: height 1.4s ease-in-out,
width 1.4s ease-in-out;
.language-switcher-language-url{
text-transform: uppercase;
color: white;
@@ -68,8 +70,13 @@ header[role="banner"]{
flex: 0 0 100%;
display: flex;
flex-direction: row;
transition: height 2s ease-in-out, width 2s ease-in-out; /* Transition pour le changement de taille */
// transition: height 2s ease-in-out, width 2s ease-in-out; /* Transition pour le changement de taille */
background-color: $white-header;
// 🔥 On anime la largeur via flex-basis (et width au cas où)
transition:
flex-basis 0.9s ease-in-out,
width 0.9s ease-in-out;
img{display: none;}
@media(max-width: 660px){
height: inherit;
@@ -187,7 +194,11 @@ header[role="banner"]{
background: $blue_QDD;
text-align: center;
transform: translateX(0);
transition: transform 0.3s ease-in-out;
// transition: transform 0.3s ease-in-out;
transition:
flex-basis 0.9s ease-in-out,
width 0.9s ease-in-out,
transform 0.3s ease-in-out; // pour tes slides
z-index: -1 ;
display: flex;
flex-direction: column;
@@ -309,14 +320,14 @@ header[role="banner"]{
}
/* 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 */
width: 35%;
transform-origin: bottom right;
transition: all 1s ease-in-out;
// transition: all 1s ease-in-out;
// transition: all 1.4s ease-in-out;
transition: all 1.4s ease-in-out;
@media(max-width: 1090px) {
height: $header-height-pad;
}
@@ -331,14 +342,17 @@ header[role="banner"].header--collapsed {
height: 170px;
}
.header_left_container{
flex: 1 0 65%;
// flex: 1 0 65%;
flex-basis: 65%;
transform-origin: bottom right;
@media(max-width: 810px){
flex: 1 0 100%;
}
}
.header_nav_container{
flex: 0 0 30%;
// flex: 0 0 30%;
flex-basis: 30%;
transform-origin: bottom right;
min-width: fit-content;
@media(max-width: 810px){
@@ -367,14 +381,16 @@ header[role="banner"].header--collapsed-already{
height: $header-height-big;
}
.header_left_container{
flex: 1 0 65%;
// flex: 1 0 65%;
flex-basis: 65%;
transform-origin: bottom right;
@media(max-width: 810px){
flex: 1 0 100%;
}
}
.header_nav_container{
flex: 0 0 30%;
// flex: 0 0 30%;
flex-basis: 30%;
min-width: fit-content;
transform-origin: bottom right;
@media(max-width: 810px){
@@ -389,3 +405,51 @@ header[role="banner"].header--collapsed-already{
}
}
/* Empêcher le scroll pendant l'intro */
body.logo-intro-animating {
overflow: hidden;
}
/* Header plein écran au tout début */
body.logo-intro-active header[role="banner"] {
height: 100vh;
width: 100%;
}
/* État normal du SVG (dans le header) */
#block-quartiers-de-demain-logoquartiersdedemain svg {
position: relative;
top: auto;
left: auto;
transform: none; // donc scale(1)
transform-origin: center center;
transition:
transform 1.4s ease-in-out,
top 1.4s ease-in-out,
left 1.4s ease-in-out;
}
/* État intro : logo centré, scale(2) */
body.logo-intro-active #block-quartiers-de-demain-logoquartiersdedemain svg {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(2);
z-index: 9999;
}
/* Pendant l'intro : même si le header est "collapsed",
on garde TOUT l'espace pour le bloc gauche,
la nav ne prend AUCUNE place (0%) */
body.logo-intro-animating header[role="banner"].header--collapsed .header_left_container {
flex: 0 0 100%;
}
body.logo-intro-animating header[role="banner"].header--collapsed .header_nav_container {
flex: 0 0 0%;
width: 0;
overflow: hidden;
}

4
web/themes/custom/quartiers_de_demain/src/assets/scss/quartiers_de_demain.scss
View File

@@ -25,12 +25,12 @@
@import "partials/header";
@import "partials/footer";
@import "partials/aside";
@import "partials/animation-logo";
// @import "partials/animation-logo";
@import "partials/slick-theme";
@import "partials/slick";
@import "partials/timeline";
@import "partials/actu-caroussel-home";
@import "partials/animation-logo-header";
// @import "partials/animation-logo-header";
@import "partials/formes-animees";
@import "partials/animation-pilliers";
@import "partials/map";