header sans animation
This commit is contained in:
@@ -785,194 +785,74 @@ document.addEventListener('keydown', (e) => {
|
||||
/*!*********************************!*\
|
||||
!*** ./src/assets/js/header.js ***!
|
||||
\*********************************/
|
||||
// // //////// 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();
|
||||
// // }
|
||||
|
||||
// // }
|
||||
// // const header = document.querySelector('header[role="banner"]');
|
||||
// // const headerNavContainer = document.querySelector('.header_nav_container');
|
||||
|
||||
// // const threshold = 100;
|
||||
// // let lastScrollTop = 0;
|
||||
// // let isHidden = false;
|
||||
// // let introDone = true; // ✅ plus d'intro, donc on considère qu'elle est "déjà finie"
|
||||
|
||||
// // /* -------------------
|
||||
// // Animations nav
|
||||
// // ------------------- */
|
||||
|
||||
// // // 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();
|
||||
// // }
|
||||
// // });
|
||||
// // 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');
|
||||
// // }, 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
|
||||
// // isHidden = true;
|
||||
// // }
|
||||
|
||||
// // function slideIn() {
|
||||
// // headerNavContainer.animate([
|
||||
// // { transform: 'translateX(-100%)' },
|
||||
// // { transform: 'translateX(0)' }
|
||||
// // ], {
|
||||
// // duration: 300,
|
||||
// // fill: 'forwards'
|
||||
// // });
|
||||
// // isHidden = false;
|
||||
// // }
|
||||
|
||||
// // function slideDown() {
|
||||
// // headerNavContainer.animate([
|
||||
// // { transform: 'translateY(-100%)' },
|
||||
// // { transform: 'translateY(0%)' }
|
||||
// // ], {
|
||||
// // duration: 300,
|
||||
// // fill: 'forwards'
|
||||
// // });
|
||||
// // isHidden = false;
|
||||
// // }
|
||||
|
||||
// // function slideUp() {
|
||||
// // headerNavContainer.animate([
|
||||
// // { transform: 'translateY(0%)' },
|
||||
// // { transform: 'translateY(-100%)' }
|
||||
// // ], {
|
||||
// // duration: 300,
|
||||
// // fill: 'forwards'
|
||||
// // });
|
||||
// // isHidden = true;
|
||||
// // }
|
||||
|
||||
// // function initNavPosition() {
|
||||
// // if (window.pageYOffset <= threshold) {
|
||||
// // if (window.innerWidth < 811) {
|
||||
// // slideDown();
|
||||
// // } else {
|
||||
// // } else {
|
||||
// // slideIn();
|
||||
// // }
|
||||
// // }
|
||||
// // } else {
|
||||
// // if (window.innerWidth < 811) {
|
||||
// // slideUp();
|
||||
@@ -980,105 +860,227 @@ document.addEventListener('keydown', (e) => {
|
||||
// // 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; // ici ça passe, introDone = true
|
||||
|
||||
// // 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;
|
||||
|
||||
// // 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();
|
||||
// // }
|
||||
// // }
|
||||
// // }
|
||||
|
||||
// // // ✅ on n'a plus besoin de masquer la nav au début
|
||||
// // if (headerNavContainer) {
|
||||
// // headerNavContainer.style.visibility = 'visible';
|
||||
// // }
|
||||
|
||||
// // window.addEventListener('scroll', handleScroll);
|
||||
// // window.addEventListener('scroll', adjustHeaderHeight);
|
||||
|
||||
// // header.addEventListener('mouseenter', handleTouchAndMouseEnter);
|
||||
// // header.addEventListener('mouseleave', handleTouchAndMouseLeave);
|
||||
|
||||
// // header.addEventListener('touchstart', handleTouchAndMouseEnter);
|
||||
// // header.addEventListener('touchend', handleTouchAndMouseLeave);
|
||||
|
||||
// // // ✅ position initiale de la nav
|
||||
// // initNavPosition();
|
||||
|
||||
// // });
|
||||
|
||||
|
||||
///////////////start header sans animation logo////////////////
|
||||
// document.addEventListener('DOMContentLoaded', function() {
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// const header = document.querySelector('header[role="banner"]');
|
||||
// const headerNavContainer = document.querySelector('.header_nav_container');
|
||||
|
||||
// if (!header || !headerNavContainer) return;
|
||||
|
||||
// const threshold = 100;
|
||||
// let lastScrollTop = 0;
|
||||
// let isHidden = false;
|
||||
// let introDone = true; // ✅ pas d'intro, donc direct prêt
|
||||
|
||||
// /* -------------------
|
||||
// Helpers show / hide
|
||||
// ------------------- */
|
||||
|
||||
// function hideNav() {
|
||||
// headerNavContainer.classList.add('nav-hidden');
|
||||
// isHidden = true;
|
||||
// }
|
||||
|
||||
// function showNav() {
|
||||
// headerNavContainer.classList.remove('nav-hidden');
|
||||
// isHidden = false;
|
||||
// }
|
||||
|
||||
// function isMobile() {
|
||||
// return window.innerWidth < 811;
|
||||
// }
|
||||
|
||||
// /* -------------------
|
||||
// Position initiale
|
||||
// ------------------- */
|
||||
|
||||
// function initNavPosition() {
|
||||
// if (window.pageYOffset <= threshold) {
|
||||
// showNav(); // en haut de page → nav visible
|
||||
// } else {
|
||||
// if (isMobile()) {
|
||||
// hideNav(); // mobile scrollé → nav cachée
|
||||
// } else {
|
||||
// showNav(); // desktop : nav visible même en bas
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
// /* -------------------
|
||||
// Scroll / resize header
|
||||
// ------------------- */
|
||||
|
||||
// function adjustHeaderHeight() {
|
||||
// if (window.scrollY > 0) {
|
||||
// header.classList.add('shrink');
|
||||
// } else {
|
||||
// header.classList.remove('shrink');
|
||||
// }
|
||||
// }
|
||||
|
||||
// function handleScroll() {
|
||||
// if (!introDone) return;
|
||||
|
||||
// let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
|
||||
|
||||
// if (scrollTop > threshold && !isHidden) {
|
||||
// // on cache la nav
|
||||
// hideNav();
|
||||
// } else if (scrollTop <= threshold && isHidden) {
|
||||
// // on ré-affiche la nav
|
||||
// showNav();
|
||||
// }
|
||||
|
||||
// lastScrollTop = scrollTop <= 0 ? 0 : scrollTop;
|
||||
// }
|
||||
|
||||
// function handleTouchAndMouseEnter() {
|
||||
// if (!introDone) return;
|
||||
// if (isHidden) {
|
||||
// showNav();
|
||||
// }
|
||||
// }
|
||||
|
||||
// function handleTouchAndMouseLeave() {
|
||||
// if (!introDone) return;
|
||||
|
||||
// if (lastScrollTop > threshold && !isHidden) {
|
||||
// hideNav();
|
||||
// }
|
||||
// }
|
||||
|
||||
// // Rendre la nav visible (plus de visibility:hidden)
|
||||
// headerNavContainer.style.visibility = 'visible';
|
||||
|
||||
// window.addEventListener('scroll', handleScroll);
|
||||
// window.addEventListener('scroll', adjustHeaderHeight);
|
||||
|
||||
// header.addEventListener('mouseenter', handleTouchAndMouseEnter);
|
||||
// header.addEventListener('mouseleave', handleTouchAndMouseLeave);
|
||||
|
||||
// header.addEventListener('touchstart', handleTouchAndMouseEnter);
|
||||
// header.addEventListener('touchend', handleTouchAndMouseLeave);
|
||||
|
||||
// // Position de départ
|
||||
// initNavPosition();
|
||||
// adjustHeaderHeight();
|
||||
// });
|
||||
|
||||
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
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
|
||||
if (!header || !headerNavContainer) return;
|
||||
|
||||
const threshold = 100;
|
||||
let lastScrollTop = 0;
|
||||
let isHidden = false;
|
||||
let introDone = false; // ✅ on saura quand l'intro est finie
|
||||
let isHidden = false; // au chargement : nav visible
|
||||
|
||||
// 🔹 On cache la nav au tout début (pour éviter toute secousse)
|
||||
if (headerNavContainer) {
|
||||
headerNavContainer.style.visibility = 'hidden';
|
||||
function isMobile() {
|
||||
return window.innerWidth < 811;
|
||||
}
|
||||
|
||||
/* -------------------
|
||||
Animations nav
|
||||
------------------- */
|
||||
/* --- helpers --- */
|
||||
|
||||
function slideOut() {
|
||||
headerNavContainer.animate([
|
||||
{ transform: 'translateX(0)' },
|
||||
{ transform: 'translateX(-100%)' }
|
||||
], {
|
||||
duration: 300,
|
||||
fill: 'forwards'
|
||||
});
|
||||
function hideNav() {
|
||||
headerNavContainer.classList.add('nav-hidden');
|
||||
isHidden = true;
|
||||
}
|
||||
|
||||
function slideIn() {
|
||||
headerNavContainer.animate([
|
||||
{ transform: 'translateX(-100%)' },
|
||||
{ transform: 'translateX(0)' }
|
||||
], {
|
||||
duration: 300,
|
||||
fill: 'forwards'
|
||||
});
|
||||
function showNav() {
|
||||
headerNavContainer.classList.remove('nav-hidden');
|
||||
isHidden = false;
|
||||
}
|
||||
|
||||
function slideDown() {
|
||||
headerNavContainer.animate([
|
||||
{ transform: 'translateY(0%)' },
|
||||
{ transform: 'translateY(+100%)' }
|
||||
], {
|
||||
duration: 300,
|
||||
fill: 'forwards'
|
||||
});
|
||||
isHidden = false;
|
||||
}
|
||||
/* --- init : nav visible au chargement --- */
|
||||
|
||||
function slideUp() {
|
||||
headerNavContainer.animate([
|
||||
{ transform: 'translateY(100%)' },
|
||||
{ transform: 'translateY(0%)' }
|
||||
], {
|
||||
duration: 300,
|
||||
fill: 'forwards'
|
||||
}).onfinish = function() {};
|
||||
isHidden = true;
|
||||
}
|
||||
headerNavContainer.style.visibility = 'visible';
|
||||
showNav();
|
||||
|
||||
// ✅ 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 {
|
||||
slideIn();
|
||||
}
|
||||
} else {
|
||||
if (window.innerWidth < 811) {
|
||||
slideUp();
|
||||
} else {
|
||||
slideIn();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* -------------------
|
||||
Scroll / resize header
|
||||
------------------- */
|
||||
/* --- shrink header --- */
|
||||
|
||||
function adjustHeaderHeight() {
|
||||
if (window.scrollY > 0) {
|
||||
@@ -1088,118 +1090,49 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
}
|
||||
}
|
||||
|
||||
function handleScroll() {
|
||||
if (!introDone) return; // ⛔ rien tant que l'intro n'est pas finie
|
||||
/* --- scroll : cache / montre la nav --- */
|
||||
|
||||
let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
|
||||
const isMobile = window.innerWidth < 811;
|
||||
function handleScroll() {
|
||||
const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
|
||||
|
||||
if (scrollTop > threshold && !isHidden) {
|
||||
if (isMobile) {
|
||||
slideUp();
|
||||
} else {
|
||||
slideOut();
|
||||
}
|
||||
// on cache la nav (desktop & mobile)
|
||||
hideNav();
|
||||
} else if (scrollTop <= threshold && isHidden) {
|
||||
if (isMobile) {
|
||||
slideDown();
|
||||
} else {
|
||||
slideIn();
|
||||
}
|
||||
// on la remonte en haut de page
|
||||
showNav();
|
||||
}
|
||||
|
||||
lastScrollTop = scrollTop <= 0 ? 0 : scrollTop;
|
||||
}
|
||||
|
||||
function handleTouchAndMouseEnter() {
|
||||
if (!introDone) return; // ⛔ pas de hover avant la fin de l'intro
|
||||
/* --- hover / touch sur le header : on montre la nav --- */
|
||||
|
||||
function handleEnter() {
|
||||
if (isHidden) {
|
||||
if (window.innerWidth < 811) {
|
||||
slideDown();
|
||||
} else {
|
||||
slideIn();
|
||||
}
|
||||
showNav();
|
||||
}
|
||||
}
|
||||
|
||||
function handleTouchAndMouseLeave() {
|
||||
if (!introDone) return;
|
||||
|
||||
function handleLeave() {
|
||||
if (lastScrollTop > threshold && !isHidden) {
|
||||
if (window.innerWidth < 811) {
|
||||
slideUp();
|
||||
} else {
|
||||
slideOut();
|
||||
}
|
||||
hideNav();
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener('scroll', handleScroll);
|
||||
window.addEventListener('scroll', adjustHeaderHeight);
|
||||
window.addEventListener('scroll', handleScroll, { passive: true });
|
||||
window.addEventListener('scroll', adjustHeaderHeight, { passive: true });
|
||||
|
||||
header.addEventListener('mouseenter', handleTouchAndMouseEnter);
|
||||
header.addEventListener('mouseleave', handleTouchAndMouseLeave);
|
||||
header.addEventListener('mouseenter', handleEnter);
|
||||
header.addEventListener('mouseleave', handleLeave);
|
||||
|
||||
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();
|
||||
}
|
||||
header.addEventListener('touchstart', handleEnter);
|
||||
header.addEventListener('touchend', handleLeave);
|
||||
|
||||
// init
|
||||
adjustHeaderHeight();
|
||||
});
|
||||
|
||||
///////////////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() {
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -258,16 +258,61 @@ svg.ext {
|
||||
}
|
||||
|
||||
/*partials*/
|
||||
/* ===========================
|
||||
HEADER GLOBAL
|
||||
=========================== */
|
||||
header[role=banner] {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
z-index: 99;
|
||||
max-width: 100vw;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
transition: height 1.4s ease-in-out, width 1.4s ease-in-out;
|
||||
left: 0;
|
||||
z-index: 50;
|
||||
max-width: 100vw;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
transform-origin: bottom right;
|
||||
height: 200px;
|
||||
width: 35%;
|
||||
transition: all 1.4s ease-in-out;
|
||||
background-color: rgb(255, 255, 255);
|
||||
/* ===========================
|
||||
LANGUAGE SWITCHER
|
||||
=========================== */
|
||||
/* ===========================
|
||||
COLONNE GAUCHE (LOGO)
|
||||
=========================== */
|
||||
/* ===========================
|
||||
BLOC DROITE OPTIONNEL
|
||||
=========================== */
|
||||
/* ===========================
|
||||
NAVIGATION (COLONNE DROITE)
|
||||
=========================== */
|
||||
/* ===========================
|
||||
ÉTATS D’AFFICHAGE DU MENU
|
||||
(pilotés en JS avec .nav-hidden)
|
||||
=========================== */
|
||||
/* État par défaut : visible */
|
||||
/* Desktop : caché → slide vers la gauche */
|
||||
/* Mobile : on utilise translateY pour cacher/montrer */
|
||||
}
|
||||
@media (max-width: 1090px) {
|
||||
header[role=banner] {
|
||||
height: 160px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1400px) {
|
||||
header[role=banner] {
|
||||
height: 250px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 810px) {
|
||||
header[role=banner] {
|
||||
width: 100%;
|
||||
height: 170px;
|
||||
flex-direction: row;
|
||||
}
|
||||
}
|
||||
header[role=banner] .qdd-header {
|
||||
opacity: 1 !important;
|
||||
}
|
||||
header[role=banner] .language-switcher-language-url {
|
||||
text-transform: uppercase;
|
||||
@@ -296,28 +341,20 @@ header[role=banner] .language-switcher-language-url ul li:nth-child(1)::after {
|
||||
header[role=banner] .language-switcher-language-url ul .is-active {
|
||||
font-family: "gilroy-bold";
|
||||
}
|
||||
@media (max-width: 810px) {
|
||||
header[role=banner] {
|
||||
height: 100vh;
|
||||
}
|
||||
header[role=banner] header {
|
||||
position: relative;
|
||||
flex-direction: column;
|
||||
height: auto !important;
|
||||
}
|
||||
}
|
||||
header[role=banner] .contextual-region {
|
||||
width: max-content;
|
||||
}
|
||||
header[role=banner] .header_left_container {
|
||||
flex: 0 0 100%;
|
||||
flex: 0 0 45%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
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;
|
||||
@media (max-width: 810px) {
|
||||
header[role=banner] .header_left_container {
|
||||
flex: 1 0 100%;
|
||||
}
|
||||
}
|
||||
@media (max-width: 660px) {
|
||||
header[role=banner] .header_left_container {
|
||||
@@ -344,24 +381,12 @@ header[role=banner] .header_left_container #block-quartiers-de-demain-logoepau-2
|
||||
header[role=banner] .header_left_container #block-quartiers-de-demain-logoquartiersdedemain {
|
||||
margin: auto;
|
||||
}
|
||||
header[role=banner] .header_left_container #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo {
|
||||
width: 90%;
|
||||
margin: auto;
|
||||
}
|
||||
@media (max-width: 1650px) {
|
||||
header[role=banner] .header_left_container #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo {
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
header[role=banner] .header_left_container #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-header {
|
||||
width: 100%;
|
||||
}
|
||||
header[role=banner] .header_left_container img {
|
||||
width: auto;
|
||||
margin: auto;
|
||||
height: calc(200px - 1rem);
|
||||
height: calc(200px - 4rem);
|
||||
padding: 2rem;
|
||||
transition: height 0.3s; /* Add transition for smooth resizing */
|
||||
transition: height 0.3s;
|
||||
}
|
||||
@media (max-width: 891px) {
|
||||
header[role=banner] .header_left_container img {
|
||||
@@ -387,78 +412,46 @@ header[role=banner] .header_right_container {
|
||||
text-align: center;
|
||||
transform: translateX(0);
|
||||
transition: transform 0.3s ease-in-out;
|
||||
z-index: -1;
|
||||
z-index: 60;
|
||||
position: fixed;
|
||||
right: 0;
|
||||
border-radius: 11px;
|
||||
padding: 0.5rem;
|
||||
padding: 0.5rem 0.5rem 0 0.5rem;
|
||||
margin: 1rem;
|
||||
padding-top: 0rem;
|
||||
padding-bottom: 0rem;
|
||||
}
|
||||
@media (max-width: 660px) {
|
||||
header[role=banner] .header_right_container {
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
header[role=banner] .header_right_container .language-switcher-language-url {
|
||||
text-transform: uppercase;
|
||||
color: white;
|
||||
}
|
||||
header[role=banner] .header_right_container .language-switcher-language-url ul {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
font-size: 0.6rem;
|
||||
padding: 0;
|
||||
}
|
||||
@media (max-width: 660px) {
|
||||
header[role=banner] .header_right_container .language-switcher-language-url ul {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
@media (max-width: 500px) {
|
||||
header[role=banner] .header_right_container .language-switcher-language-url ul {
|
||||
flex-direction: column;
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
header[role=banner] .header_right_container .language-switcher-language-url ul li a {
|
||||
color: white;
|
||||
font-family: "gilroy-light";
|
||||
}
|
||||
header[role=banner] .header_right_container .language-switcher-language-url ul li:nth-child(1)::after {
|
||||
content: " / ";
|
||||
white-space: pre;
|
||||
}
|
||||
@media (max-width: 660px) {
|
||||
header[role=banner] .header_right_container .language-switcher-language-url ul li:nth-child(1)::after {
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
header[role=banner] .header_right_container .language-switcher-language-url ul .is-active {
|
||||
font-family: "gilroy-bold";
|
||||
}
|
||||
header[role=banner] .header_nav_container {
|
||||
flex: 0 0 0%;
|
||||
flex: 0 0 30%;
|
||||
width: 100%;
|
||||
min-width: fit-content;
|
||||
background: rgb(7, 50, 194);
|
||||
text-align: center;
|
||||
transform: translateX(0);
|
||||
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;
|
||||
z-index: -1;
|
||||
transform: translateX(0);
|
||||
transition: flex-basis 0.9s ease-in-out, width 0.9s ease-in-out, transform 0.3s ease-in-out;
|
||||
/* ---- Bloc menu principal ---- */
|
||||
/* ---- Sélecteur de langue en bas du menu ---- */
|
||||
}
|
||||
@media (max-width: 810px) {
|
||||
header[role=banner] .header_nav_container {
|
||||
/* 🔹 en mobile : nav en dessous du header, en absolu */
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 170px;
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
top: -30px;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
}
|
||||
@media (max-width: 500px) {
|
||||
header[role=banner] .header_nav_container {
|
||||
flex: 0 0 40%;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
header[role=banner] .header_nav_container #block-quartiers-de-demain-entete {
|
||||
@@ -534,18 +527,27 @@ header[role=banner] .header_nav_container #block-quartiers-de-demain-selecteurde
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
}
|
||||
header[role=banner] .header_nav_container.hidden {
|
||||
transform: translateX(30%);
|
||||
}
|
||||
header[role=banner] .header_nav_container.visible {
|
||||
header[role=banner] .header_nav_container {
|
||||
transform: translateX(0);
|
||||
}
|
||||
header[role=banner] .header:hover + .header_nav_container {
|
||||
transform: translateX(0);
|
||||
header[role=banner] .header_nav_container.nav-hidden {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
@media (max-width: 810px) {
|
||||
header[role=banner] .header_nav_container {
|
||||
transform: translateY(0);
|
||||
}
|
||||
header[role=banner] .header_nav_container.nav-hidden {
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
}
|
||||
|
||||
/* ===========================
|
||||
HEADER "SHRINK" AU SCROLL
|
||||
=========================== */
|
||||
.shrink {
|
||||
height: 260px;
|
||||
background: none;
|
||||
}
|
||||
@media (max-width: 810px) {
|
||||
.shrink {
|
||||
@@ -553,143 +555,6 @@ header[role=banner] .header:hover + .header_nav_container {
|
||||
}
|
||||
}
|
||||
|
||||
/* Taille définitive du header après l'animation */
|
||||
header[role=banner].header--collapsed {
|
||||
height: 200px; /* Ou la hauteur que vous souhaitez pour votre header */
|
||||
width: 35%;
|
||||
transform-origin: bottom right;
|
||||
transition: all 1.4s ease-in-out;
|
||||
}
|
||||
@media (max-width: 1090px) {
|
||||
header[role=banner].header--collapsed {
|
||||
height: 160px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1400px) {
|
||||
header[role=banner].header--collapsed {
|
||||
height: 250px;
|
||||
}
|
||||
}
|
||||
header[role=banner].header--collapsed .qdd-header {
|
||||
opacity: 1 !important;
|
||||
}
|
||||
@media (max-width: 810px) {
|
||||
header[role=banner].header--collapsed {
|
||||
width: 100%;
|
||||
height: 170px;
|
||||
}
|
||||
}
|
||||
header[role=banner].header--collapsed .header_left_container {
|
||||
flex-basis: 65%;
|
||||
transform-origin: bottom right;
|
||||
}
|
||||
@media (max-width: 810px) {
|
||||
header[role=banner].header--collapsed .header_left_container {
|
||||
flex: 1 0 100%;
|
||||
}
|
||||
}
|
||||
header[role=banner].header--collapsed .header_nav_container {
|
||||
flex-basis: 30%;
|
||||
transform-origin: bottom right;
|
||||
min-width: fit-content;
|
||||
}
|
||||
@media (max-width: 810px) {
|
||||
header[role=banner].header--collapsed .header_nav_container {
|
||||
flex: 1 0 100%;
|
||||
position: relative;
|
||||
left: -100%;
|
||||
}
|
||||
}
|
||||
|
||||
header[role=banner].header--collapsed-already {
|
||||
height: 200px; /* Ou la hauteur que vous souhaitez pour votre header */
|
||||
width: 35%;
|
||||
transform-origin: bottom right;
|
||||
transition: all 0s ease-in-out;
|
||||
}
|
||||
header[role=banner].header--collapsed-already .qdd-header {
|
||||
opacity: 1 !important;
|
||||
}
|
||||
@media (max-width: 810px) {
|
||||
header[role=banner].header--collapsed-already {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1400px) {
|
||||
header[role=banner].header--collapsed-already {
|
||||
height: 250px;
|
||||
}
|
||||
}
|
||||
header[role=banner].header--collapsed-already .header_left_container {
|
||||
flex-basis: 65%;
|
||||
transform-origin: bottom right;
|
||||
}
|
||||
@media (max-width: 810px) {
|
||||
header[role=banner].header--collapsed-already .header_left_container {
|
||||
flex: 1 0 100%;
|
||||
}
|
||||
}
|
||||
header[role=banner].header--collapsed-already .header_nav_container {
|
||||
flex-basis: 30%;
|
||||
min-width: fit-content;
|
||||
transform-origin: bottom right;
|
||||
}
|
||||
@media (max-width: 810px) {
|
||||
header[role=banner].header--collapsed-already .header_nav_container {
|
||||
flex: 1 0 100%;
|
||||
position: relative;
|
||||
left: -100%;
|
||||
}
|
||||
}
|
||||
@media (max-width: 550px) {
|
||||
header[role=banner].header--collapsed-already .header_nav_container {
|
||||
top: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 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;
|
||||
}
|
||||
|
||||
@@ -1,191 +1,71 @@
|
||||
// // //////// 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();
|
||||
// // }
|
||||
|
||||
// // }
|
||||
// // const header = document.querySelector('header[role="banner"]');
|
||||
// // const headerNavContainer = document.querySelector('.header_nav_container');
|
||||
|
||||
// // const threshold = 100;
|
||||
// // let lastScrollTop = 0;
|
||||
// // let isHidden = false;
|
||||
// // let introDone = true; // ✅ plus d'intro, donc on considère qu'elle est "déjà finie"
|
||||
|
||||
// // /* -------------------
|
||||
// // Animations nav
|
||||
// // ------------------- */
|
||||
|
||||
// // // 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();
|
||||
// // }
|
||||
// // });
|
||||
// // 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');
|
||||
// // }, 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
|
||||
// // isHidden = true;
|
||||
// // }
|
||||
|
||||
// // function slideIn() {
|
||||
// // headerNavContainer.animate([
|
||||
// // { transform: 'translateX(-100%)' },
|
||||
// // { transform: 'translateX(0)' }
|
||||
// // ], {
|
||||
// // duration: 300,
|
||||
// // fill: 'forwards'
|
||||
// // });
|
||||
// // isHidden = false;
|
||||
// // }
|
||||
|
||||
// // function slideDown() {
|
||||
// // headerNavContainer.animate([
|
||||
// // { transform: 'translateY(-100%)' },
|
||||
// // { transform: 'translateY(0%)' }
|
||||
// // ], {
|
||||
// // duration: 300,
|
||||
// // fill: 'forwards'
|
||||
// // });
|
||||
// // isHidden = false;
|
||||
// // }
|
||||
|
||||
// // function slideUp() {
|
||||
// // headerNavContainer.animate([
|
||||
// // { transform: 'translateY(0%)' },
|
||||
// // { transform: 'translateY(-100%)' }
|
||||
// // ], {
|
||||
// // duration: 300,
|
||||
// // fill: 'forwards'
|
||||
// // });
|
||||
// // isHidden = true;
|
||||
// // }
|
||||
|
||||
// // function initNavPosition() {
|
||||
// // if (window.pageYOffset <= threshold) {
|
||||
// // if (window.innerWidth < 811) {
|
||||
// // slideDown();
|
||||
// // } else {
|
||||
// // } else {
|
||||
// // slideIn();
|
||||
// // }
|
||||
// // }
|
||||
// // } else {
|
||||
// // if (window.innerWidth < 811) {
|
||||
// // slideUp();
|
||||
@@ -193,105 +73,227 @@
|
||||
// // 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; // ici ça passe, introDone = true
|
||||
|
||||
// // 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;
|
||||
|
||||
// // 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();
|
||||
// // }
|
||||
// // }
|
||||
// // }
|
||||
|
||||
// // // ✅ on n'a plus besoin de masquer la nav au début
|
||||
// // if (headerNavContainer) {
|
||||
// // headerNavContainer.style.visibility = 'visible';
|
||||
// // }
|
||||
|
||||
// // window.addEventListener('scroll', handleScroll);
|
||||
// // window.addEventListener('scroll', adjustHeaderHeight);
|
||||
|
||||
// // header.addEventListener('mouseenter', handleTouchAndMouseEnter);
|
||||
// // header.addEventListener('mouseleave', handleTouchAndMouseLeave);
|
||||
|
||||
// // header.addEventListener('touchstart', handleTouchAndMouseEnter);
|
||||
// // header.addEventListener('touchend', handleTouchAndMouseLeave);
|
||||
|
||||
// // // ✅ position initiale de la nav
|
||||
// // initNavPosition();
|
||||
|
||||
// // });
|
||||
|
||||
|
||||
///////////////start header sans animation logo////////////////
|
||||
// document.addEventListener('DOMContentLoaded', function() {
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// const header = document.querySelector('header[role="banner"]');
|
||||
// const headerNavContainer = document.querySelector('.header_nav_container');
|
||||
|
||||
// if (!header || !headerNavContainer) return;
|
||||
|
||||
// const threshold = 100;
|
||||
// let lastScrollTop = 0;
|
||||
// let isHidden = false;
|
||||
// let introDone = true; // ✅ pas d'intro, donc direct prêt
|
||||
|
||||
// /* -------------------
|
||||
// Helpers show / hide
|
||||
// ------------------- */
|
||||
|
||||
// function hideNav() {
|
||||
// headerNavContainer.classList.add('nav-hidden');
|
||||
// isHidden = true;
|
||||
// }
|
||||
|
||||
// function showNav() {
|
||||
// headerNavContainer.classList.remove('nav-hidden');
|
||||
// isHidden = false;
|
||||
// }
|
||||
|
||||
// function isMobile() {
|
||||
// return window.innerWidth < 811;
|
||||
// }
|
||||
|
||||
// /* -------------------
|
||||
// Position initiale
|
||||
// ------------------- */
|
||||
|
||||
// function initNavPosition() {
|
||||
// if (window.pageYOffset <= threshold) {
|
||||
// showNav(); // en haut de page → nav visible
|
||||
// } else {
|
||||
// if (isMobile()) {
|
||||
// hideNav(); // mobile scrollé → nav cachée
|
||||
// } else {
|
||||
// showNav(); // desktop : nav visible même en bas
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
// /* -------------------
|
||||
// Scroll / resize header
|
||||
// ------------------- */
|
||||
|
||||
// function adjustHeaderHeight() {
|
||||
// if (window.scrollY > 0) {
|
||||
// header.classList.add('shrink');
|
||||
// } else {
|
||||
// header.classList.remove('shrink');
|
||||
// }
|
||||
// }
|
||||
|
||||
// function handleScroll() {
|
||||
// if (!introDone) return;
|
||||
|
||||
// let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
|
||||
|
||||
// if (scrollTop > threshold && !isHidden) {
|
||||
// // on cache la nav
|
||||
// hideNav();
|
||||
// } else if (scrollTop <= threshold && isHidden) {
|
||||
// // on ré-affiche la nav
|
||||
// showNav();
|
||||
// }
|
||||
|
||||
// lastScrollTop = scrollTop <= 0 ? 0 : scrollTop;
|
||||
// }
|
||||
|
||||
// function handleTouchAndMouseEnter() {
|
||||
// if (!introDone) return;
|
||||
// if (isHidden) {
|
||||
// showNav();
|
||||
// }
|
||||
// }
|
||||
|
||||
// function handleTouchAndMouseLeave() {
|
||||
// if (!introDone) return;
|
||||
|
||||
// if (lastScrollTop > threshold && !isHidden) {
|
||||
// hideNav();
|
||||
// }
|
||||
// }
|
||||
|
||||
// // Rendre la nav visible (plus de visibility:hidden)
|
||||
// headerNavContainer.style.visibility = 'visible';
|
||||
|
||||
// window.addEventListener('scroll', handleScroll);
|
||||
// window.addEventListener('scroll', adjustHeaderHeight);
|
||||
|
||||
// header.addEventListener('mouseenter', handleTouchAndMouseEnter);
|
||||
// header.addEventListener('mouseleave', handleTouchAndMouseLeave);
|
||||
|
||||
// header.addEventListener('touchstart', handleTouchAndMouseEnter);
|
||||
// header.addEventListener('touchend', handleTouchAndMouseLeave);
|
||||
|
||||
// // Position de départ
|
||||
// initNavPosition();
|
||||
// adjustHeaderHeight();
|
||||
// });
|
||||
|
||||
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
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
|
||||
if (!header || !headerNavContainer) return;
|
||||
|
||||
const threshold = 100;
|
||||
let lastScrollTop = 0;
|
||||
let isHidden = false;
|
||||
let introDone = false; // ✅ on saura quand l'intro est finie
|
||||
let isHidden = false; // au chargement : nav visible
|
||||
|
||||
// 🔹 On cache la nav au tout début (pour éviter toute secousse)
|
||||
if (headerNavContainer) {
|
||||
headerNavContainer.style.visibility = 'hidden';
|
||||
function isMobile() {
|
||||
return window.innerWidth < 811;
|
||||
}
|
||||
|
||||
/* -------------------
|
||||
Animations nav
|
||||
------------------- */
|
||||
/* --- helpers --- */
|
||||
|
||||
function slideOut() {
|
||||
headerNavContainer.animate([
|
||||
{ transform: 'translateX(0)' },
|
||||
{ transform: 'translateX(-100%)' }
|
||||
], {
|
||||
duration: 300,
|
||||
fill: 'forwards'
|
||||
});
|
||||
function hideNav() {
|
||||
headerNavContainer.classList.add('nav-hidden');
|
||||
isHidden = true;
|
||||
}
|
||||
|
||||
function slideIn() {
|
||||
headerNavContainer.animate([
|
||||
{ transform: 'translateX(-100%)' },
|
||||
{ transform: 'translateX(0)' }
|
||||
], {
|
||||
duration: 300,
|
||||
fill: 'forwards'
|
||||
});
|
||||
function showNav() {
|
||||
headerNavContainer.classList.remove('nav-hidden');
|
||||
isHidden = false;
|
||||
}
|
||||
|
||||
function slideDown() {
|
||||
headerNavContainer.animate([
|
||||
{ transform: 'translateY(0%)' },
|
||||
{ transform: 'translateY(+100%)' }
|
||||
], {
|
||||
duration: 300,
|
||||
fill: 'forwards'
|
||||
});
|
||||
isHidden = false;
|
||||
}
|
||||
/* --- init : nav visible au chargement --- */
|
||||
|
||||
function slideUp() {
|
||||
headerNavContainer.animate([
|
||||
{ transform: 'translateY(100%)' },
|
||||
{ transform: 'translateY(0%)' }
|
||||
], {
|
||||
duration: 300,
|
||||
fill: 'forwards'
|
||||
}).onfinish = function() {};
|
||||
isHidden = true;
|
||||
}
|
||||
headerNavContainer.style.visibility = 'visible';
|
||||
showNav();
|
||||
|
||||
// ✅ 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 {
|
||||
slideIn();
|
||||
}
|
||||
} else {
|
||||
if (window.innerWidth < 811) {
|
||||
slideUp();
|
||||
} else {
|
||||
slideIn();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* -------------------
|
||||
Scroll / resize header
|
||||
------------------- */
|
||||
/* --- shrink header --- */
|
||||
|
||||
function adjustHeaderHeight() {
|
||||
if (window.scrollY > 0) {
|
||||
@@ -301,115 +303,45 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
}
|
||||
}
|
||||
|
||||
function handleScroll() {
|
||||
if (!introDone) return; // ⛔ rien tant que l'intro n'est pas finie
|
||||
/* --- scroll : cache / montre la nav --- */
|
||||
|
||||
let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
|
||||
const isMobile = window.innerWidth < 811;
|
||||
function handleScroll() {
|
||||
const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
|
||||
|
||||
if (scrollTop > threshold && !isHidden) {
|
||||
if (isMobile) {
|
||||
slideUp();
|
||||
} else {
|
||||
slideOut();
|
||||
}
|
||||
// on cache la nav (desktop & mobile)
|
||||
hideNav();
|
||||
} else if (scrollTop <= threshold && isHidden) {
|
||||
if (isMobile) {
|
||||
slideDown();
|
||||
} else {
|
||||
slideIn();
|
||||
}
|
||||
// on la remonte en haut de page
|
||||
showNav();
|
||||
}
|
||||
|
||||
lastScrollTop = scrollTop <= 0 ? 0 : scrollTop;
|
||||
}
|
||||
|
||||
function handleTouchAndMouseEnter() {
|
||||
if (!introDone) return; // ⛔ pas de hover avant la fin de l'intro
|
||||
/* --- hover / touch sur le header : on montre la nav --- */
|
||||
|
||||
function handleEnter() {
|
||||
if (isHidden) {
|
||||
if (window.innerWidth < 811) {
|
||||
slideDown();
|
||||
} else {
|
||||
slideIn();
|
||||
}
|
||||
showNav();
|
||||
}
|
||||
}
|
||||
|
||||
function handleTouchAndMouseLeave() {
|
||||
if (!introDone) return;
|
||||
|
||||
function handleLeave() {
|
||||
if (lastScrollTop > threshold && !isHidden) {
|
||||
if (window.innerWidth < 811) {
|
||||
slideUp();
|
||||
} else {
|
||||
slideOut();
|
||||
}
|
||||
hideNav();
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener('scroll', handleScroll);
|
||||
window.addEventListener('scroll', adjustHeaderHeight);
|
||||
window.addEventListener('scroll', handleScroll, { passive: true });
|
||||
window.addEventListener('scroll', adjustHeaderHeight, { passive: true });
|
||||
|
||||
header.addEventListener('mouseenter', handleTouchAndMouseEnter);
|
||||
header.addEventListener('mouseleave', handleTouchAndMouseLeave);
|
||||
header.addEventListener('mouseenter', handleEnter);
|
||||
header.addEventListener('mouseleave', handleLeave);
|
||||
|
||||
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();
|
||||
}
|
||||
header.addEventListener('touchstart', handleEnter);
|
||||
header.addEventListener('touchend', handleLeave);
|
||||
|
||||
// init
|
||||
adjustHeaderHeight();
|
||||
});
|
||||
|
||||
///////////////end header sans animation logo////////////////
|
||||
File diff suppressed because it is too large
Load Diff
@@ -432,9 +432,9 @@
|
||||
|
||||
{% for item in items %}
|
||||
<div{{ item.attributes }}>
|
||||
<a class='logo-qdd' href="{{ ancre_href1 }}">
|
||||
{# <a class='logo-qdd' href="{{ ancre_href1 }}">
|
||||
{{ svg_icon|raw }}
|
||||
</a>
|
||||
</a> #}
|
||||
|
||||
<a clas='other-logo' href="{{ ancre_href }}">
|
||||
{{ item.content }}
|
||||
|
||||
Reference in New Issue
Block a user