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

animation header plus rappide

Browse Source
This commit is contained in:
Ouidade Soussi Chiadmi
2025-12-01 20:38:17 +01:00
parent 4e8fe4fb2d
commit 6fe9fe1a54
7 changed files with 38 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -352,6 +352,8 @@ if (documentsLiensWrapper && blockRegionThird) {
}
});
/////////////////// start langswitcher position responsive//////////////////////
document.addEventListener("DOMContentLoaded", function () {
// Fonction pour déplacer le bloc en fonction de la taille de l'écran
@@ -836,7 +838,7 @@ document.addEventListener('DOMContentLoaded', function() {
// Sinon, appliquer la transition après un délai, sauf si scroll
let collapseTimeout = setTimeout(() => {
header.classList.add('header--collapsed');
}, 5000);
}, 2500);
function interruptCollapseOnScroll() {
if (!header.classList.contains('header--collapsed')) {
@@ -859,7 +861,7 @@ document.addEventListener('DOMContentLoaded', function() {
{ transform: 'translateX(0)' },
{ transform: 'translateX(-100%)' }
], {
duration: 300,
duration: 200,
fill: 'forwards'
});
isHidden = true;
@@ -870,7 +872,7 @@ document.addEventListener('DOMContentLoaded', function() {
{ transform: 'translateX(-100%)' },
{ transform: 'translateX(0)' }
], {
duration: 300,
duration: 200,
fill: 'forwards'
});
isHidden = false;
@@ -882,7 +884,7 @@ document.addEventListener('DOMContentLoaded', function() {
{ transform: 'translateY(0%)' },
{ transform: 'translateY(+100%)' }
], {
duration: 300,
duration: 200,
fill: 'forwards'
});
isHidden = false;
@@ -893,7 +895,7 @@ document.addEventListener('DOMContentLoaded', function() {
{ transform: 'translateY(100%)' },
{ transform: 'translateY(0%)' }
], {
duration: 300,
duration: 200,
fill: 'forwards'
}).onfinish = function() {
// headerNavContainer.style.display = 'none';

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

File diff suppressed because one or more lines are too long

22
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: none;
transition: height 5s ease-in-out, width 5s ease-in-out;
}
header[role=banner] .language-switcher-language-url {
text-transform: uppercase;
@@ -2056,27 +2056,27 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
}
header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-header.animated .blink-blue {
opacity: 0;
animation-delay: 0.2s;
animation-delay: 0.1s;
animation-name: blink;
animation-duration: 10s;
animation-duration: 5s;
}
header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-header.animated .blink-red {
opacity: 0;
animation-delay: 0.8s;
animation-delay: 0.3s;
animation-name: blink;
animation-duration: 10s;
animation-duration: 5s;
}
header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-header.animated .blink-black {
opacity: 0;
animation-delay: 1.5s;
animation-delay: 0.5s;
animation-name: blink;
animation-duration: 10s;
animation-duration: 5s;
}
header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-header.animated .blink-black2 {
opacity: 0;
animation-delay: 2s;
animation-delay: 1s;
animation-name: blink;
animation-duration: 10s;
animation-duration: 5s;
}
@keyframes blink {
0%, 100% {
@@ -2089,8 +2089,8 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-header.animated .consultation {
display: none;
animation-name: slideIn;
animation-delay: 1s;
animation-duration: 3s;
animation-delay: 0.5s;
animation-duration: 1s;
}
@keyframes slideIn {
0% {

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

@@ -58,7 +58,7 @@ document.addEventListener('DOMContentLoaded', function() {
// Sinon, appliquer la transition après un délai, sauf si scroll
let collapseTimeout = setTimeout(() => {
header.classList.add('header--collapsed');
}, 5000);
}, 2500);
function interruptCollapseOnScroll() {
if (!header.classList.contains('header--collapsed')) {
@@ -81,7 +81,7 @@ document.addEventListener('DOMContentLoaded', function() {
{ transform: 'translateX(0)' },
{ transform: 'translateX(-100%)' }
], {
duration: 300,
duration: 200,
fill: 'forwards'
});
isHidden = true;
@@ -92,7 +92,7 @@ document.addEventListener('DOMContentLoaded', function() {
{ transform: 'translateX(-100%)' },
{ transform: 'translateX(0)' }
], {
duration: 300,
duration: 200,
fill: 'forwards'
});
isHidden = false;
@@ -104,7 +104,7 @@ document.addEventListener('DOMContentLoaded', function() {
{ transform: 'translateY(0%)' },
{ transform: 'translateY(+100%)' }
], {
duration: 300,
duration: 200,
fill: 'forwards'
});
isHidden = false;
@@ -115,7 +115,7 @@ document.addEventListener('DOMContentLoaded', function() {
{ transform: 'translateY(100%)' },
{ transform: 'translateY(0%)' }
], {
duration: 300,
duration: 200,
fill: 'forwards'
}).onfinish = function() {
// headerNavContainer.style.display = 'none';

2
web/themes/custom/quartiers_de_demain/src/assets/js/quartiers_de_demain.js
View File

@@ -294,6 +294,8 @@ if (documentsLiensWrapper && blockRegionThird) {
}
});
/////////////////// start langswitcher position responsive//////////////////////
document.addEventListener("DOMContentLoaded", function () {
// Fonction pour déplacer le bloc en fonction de la taille de l'écran

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

@@ -12,30 +12,30 @@ header{
.blink-blue {
opacity: 0;
// animation: blink 3s 3;
animation-delay: 0.2s;
animation-delay: 0.1s;
animation-name: blink;
animation-duration: 10s;
animation-duration: 5s;
}
.blink-red {
opacity: 0;
animation-delay: 0.8s;
animation-delay: 0.3s;
animation-name: blink;
animation-duration: 10s;
animation-duration: 5s;
}
.blink-black {
opacity: 0;
animation-delay: 1.5s;
animation-delay: 0.5s;
animation-name: blink;
animation-duration: 10s;
animation-duration: 5s;
}
.blink-black2 {
opacity: 0;
animation-delay: 2s;
animation-delay: 1s;
animation-name: blink;
animation-duration: 10s;
animation-duration: 5s;
}
@keyframes blink {
0%, 100% {
@@ -49,8 +49,8 @@ header{
.consultation{
display: none;
animation-name: slideIn;
animation-delay: 1s;
animation-duration: 3s;
animation-delay: 0.5s;
animation-duration: 1s;
}
@keyframes slideIn {

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

@@ -7,8 +7,8 @@ header[role="banner"]{
max-width: 100vw;
position: fixed;
top: 0;
transition: none;
// transition: none;
transition: height 5s ease-in-out, width 5s ease-in-out;
// transition: height 2s ease-in-out, width 2s ease-in-out; /* Transition pour le changement de taille */
// transition: height 0.3s, padding 0.3s; /* Add transition for smooth resizing */