js header
This commit is contained in:
parent
48a928428d
commit
c7f5338a71
File diff suppressed because one or more lines are too long
|
@ -419,7 +419,7 @@ header .header:hover + .header_nav_container {
|
|||
/* Taille définitive du header après l'animation */
|
||||
.header--collapsed {
|
||||
height: 320px; /* Ou la hauteur que vous souhaitez pour votre header */
|
||||
width: 50%;
|
||||
width: 45%;
|
||||
transform-origin: bottom right; /* Origine de la transformation à l'angle bas droit */
|
||||
transition: all 1s ease-in-out;
|
||||
}
|
||||
|
@ -434,7 +434,7 @@ header .header:hover + .header_nav_container {
|
|||
|
||||
.header--collapsed-already {
|
||||
height: 320px; /* Ou la hauteur que vous souhaitez pour votre header */
|
||||
width: 50%;
|
||||
width: 45%;
|
||||
transform-origin: bottom right; /* Origine de la transformation à l'angle bas droit */
|
||||
transition: all 0s ease-in-out;
|
||||
}
|
||||
|
|
|
@ -37,11 +37,14 @@
|
|||
|
||||
// });
|
||||
|
||||
//////// header ////////////
|
||||
//////// start header ////////////
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
|
||||
const header = document.querySelector('header');
|
||||
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() {
|
||||
|
@ -76,16 +79,8 @@
|
|||
}
|
||||
});
|
||||
});
|
||||
|
||||
observer.observe(header, { attributes: true });
|
||||
|
||||
});
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
|
||||
const header = document.querySelector('header');
|
||||
const isFirstLoad = !performance.getEntriesByType("navigation")[0].type.includes('back_forward');
|
||||
const isTargetPath = window.location.pathname === '/';
|
||||
|
||||
// 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) {
|
||||
|
@ -99,11 +94,8 @@
|
|||
}, 5000);
|
||||
}
|
||||
|
||||
//////////////
|
||||
|
||||
|
||||
// Gestion du scroll pour afficher/masquer le header nav
|
||||
const headerNavContainer = document.querySelector('.header_nav_container');
|
||||
const headerLeftContainer = document.querySelector('header');
|
||||
let lastScrollTop = 0;
|
||||
let threshold = 100; // Change this value as needed
|
||||
let isHidden = false;
|
||||
|
@ -133,9 +125,9 @@
|
|||
// Fonction pour ajuster la hauteur du header lors du défilement
|
||||
function adjustHeaderHeight() {
|
||||
if (window.scrollY > 0) {
|
||||
headerLeftContainer.classList.add('shrink');
|
||||
header.classList.add('shrink');
|
||||
} else {
|
||||
headerLeftContainer.classList.remove('shrink');
|
||||
header.classList.remove('shrink');
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -167,12 +159,12 @@
|
|||
window.addEventListener('scroll', adjustHeaderHeight);
|
||||
|
||||
// Mouse events for desktop
|
||||
headerLeftContainer.addEventListener('mouseenter', handleTouchAndMouseEnter);
|
||||
headerLeftContainer.addEventListener('mouseleave', handleTouchAndMouseLeave);
|
||||
header.addEventListener('mouseenter', handleTouchAndMouseEnter);
|
||||
header.addEventListener('mouseleave', handleTouchAndMouseLeave);
|
||||
|
||||
// Touch events for tablets and mobile devices
|
||||
headerLeftContainer.addEventListener('touchstart', handleTouchAndMouseEnter);
|
||||
headerLeftContainer.addEventListener('touchend', handleTouchAndMouseLeave);
|
||||
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) {
|
||||
|
@ -180,12 +172,13 @@
|
|||
} else {
|
||||
slideOut();
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
//////// end header ////////////
|
||||
|
||||
|
||||
|
||||
// /////////////////
|
||||
//// ancre dans texte au click parragraphe correspondant arrive en dessous du header
|
||||
|
||||
|
||||
|
@ -203,8 +196,7 @@
|
|||
});
|
||||
|
||||
|
||||
//////////////////////// smooth apparition des textes
|
||||
|
||||
//////////////////////// start script smooth apparition des textes /////////////////
|
||||
|
||||
function scrollReaveal(){
|
||||
|
||||
|
@ -240,14 +232,15 @@
|
|||
scrollReaveal();
|
||||
});
|
||||
|
||||
//////////////////////// end script smooth apparition des textes /////////////////
|
||||
|
||||
|
||||
////////////////// Timeline ///////////////////////
|
||||
//////////////////// start Timeline script ///////////////////////
|
||||
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
let currentSlide = 0;
|
||||
|
||||
//// responsive ///
|
||||
function getVisibleSlides() {
|
||||
if (window.innerWidth <= 600) {
|
||||
return 1; // Show 1 slide on small screens
|
||||
|
@ -288,9 +281,6 @@
|
|||
document.getElementById('arrowPrev').addEventListener('click', prevSlide);
|
||||
document.getElementById('arrowNext').addEventListener('click', nextSlide);
|
||||
|
||||
// Initialize the first view of the slides
|
||||
showSlides(currentSlide);
|
||||
|
||||
// Update month field to only show the first 3 letters
|
||||
document.querySelectorAll('.paragraph--type--phase-deroulement').forEach(function(paragraph) {
|
||||
const monthField = paragraph.querySelector('.field_field_date_de_moi div:nth-of-type(2)');
|
||||
|
@ -302,19 +292,7 @@
|
|||
}
|
||||
});
|
||||
|
||||
// Handle window resize
|
||||
window.addEventListener('resize', function() {
|
||||
showSlides(currentSlide); // Recalculate the slides on resize
|
||||
});
|
||||
// });
|
||||
|
||||
|
||||
// Initialize
|
||||
showSlides(currentSlide);
|
||||
});
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Iterate over each .date element
|
||||
// for each .date element add or remove ::before
|
||||
document.querySelectorAll('.date').forEach(function(dateElement) {
|
||||
const date2Element = dateElement.querySelector('.date2');
|
||||
const yearElement = dateElement.querySelector('.field_field_date_de_annee');
|
||||
|
@ -325,9 +303,20 @@
|
|||
yearElement.classList.add('only');
|
||||
}
|
||||
});
|
||||
|
||||
// Handle window resize
|
||||
window.addEventListener('resize', function() {
|
||||
showSlides(currentSlide); // Recalculate the slides on resize
|
||||
});
|
||||
// });
|
||||
|
||||
|
||||
// Initialize
|
||||
showSlides(currentSlide);
|
||||
});
|
||||
|
||||
|
||||
//////////////////////// end Timeline script /////////////////////////////////////////////
|
||||
|
||||
/////////////////// caracteres body actus/////////////////////////
|
||||
|
||||
|
|
|
@ -195,7 +195,7 @@ header{
|
|||
/* Taille définitive du header après l'animation */
|
||||
.header--collapsed {
|
||||
height: $header-height; /* Ou la hauteur que vous souhaitez pour votre header */
|
||||
width: 50%;
|
||||
width: 45%;
|
||||
transform-origin: bottom right; /* Origine de la transformation à l'angle bas droit */
|
||||
transition: all 1s ease-in-out;
|
||||
.header_left_container{
|
||||
|
@ -210,7 +210,7 @@ header{
|
|||
}
|
||||
.header--collapsed-already{
|
||||
height: $header-height; /* Ou la hauteur que vous souhaitez pour votre header */
|
||||
width: 50%;
|
||||
width: 45%;
|
||||
transform-origin: bottom right; /* Origine de la transformation à l'angle bas droit */
|
||||
transition: all 0s ease-in-out;
|
||||
.header_left_container{
|
||||
|
|
Loading…
Reference in New Issue