header sans animation
This commit is contained in:
@@ -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
Reference in New Issue
Block a user