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////////////////////// /////////////////// start langswitcher position responsive//////////////////////
document.addEventListener("DOMContentLoaded", function () { document.addEventListener("DOMContentLoaded", function () {
// Fonction pour déplacer le bloc en fonction de la taille de l'écran // 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 // Sinon, appliquer la transition après un délai, sauf si scroll
let collapseTimeout = setTimeout(() => { let collapseTimeout = setTimeout(() => {
header.classList.add('header--collapsed'); header.classList.add('header--collapsed');
}, 5000); }, 2500);
function interruptCollapseOnScroll() { function interruptCollapseOnScroll() {
if (!header.classList.contains('header--collapsed')) { if (!header.classList.contains('header--collapsed')) {
@@ -859,7 +861,7 @@ document.addEventListener('DOMContentLoaded', function() {
{ transform: 'translateX(0)' }, { transform: 'translateX(0)' },
{ transform: 'translateX(-100%)' } { transform: 'translateX(-100%)' }
], { ], {
duration: 300, duration: 200,
fill: 'forwards' fill: 'forwards'
}); });
isHidden = true; isHidden = true;
@@ -870,7 +872,7 @@ document.addEventListener('DOMContentLoaded', function() {
{ transform: 'translateX(-100%)' }, { transform: 'translateX(-100%)' },
{ transform: 'translateX(0)' } { transform: 'translateX(0)' }
], { ], {
duration: 300, duration: 200,
fill: 'forwards' fill: 'forwards'
}); });
isHidden = false; isHidden = false;
@@ -882,7 +884,7 @@ document.addEventListener('DOMContentLoaded', function() {
{ transform: 'translateY(0%)' }, { transform: 'translateY(0%)' },
{ transform: 'translateY(+100%)' } { transform: 'translateY(+100%)' }
], { ], {
duration: 300, duration: 200,
fill: 'forwards' fill: 'forwards'
}); });
isHidden = false; isHidden = false;
@@ -893,7 +895,7 @@ document.addEventListener('DOMContentLoaded', function() {
{ transform: 'translateY(100%)' }, { transform: 'translateY(100%)' },
{ transform: 'translateY(0%)' } { transform: 'translateY(0%)' }
], { ], {
duration: 300, duration: 200,
fill: 'forwards' fill: 'forwards'
}).onfinish = function() { }).onfinish = function() {
// headerNavContainer.style.display = 'none'; // 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; max-width: 100vw;
position: fixed; position: fixed;
top: 0; top: 0;
transition: none; transition: height 5s ease-in-out, width 5s ease-in-out;
} }
header[role=banner] .language-switcher-language-url { header[role=banner] .language-switcher-language-url {
text-transform: uppercase; 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 { header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-header.animated .blink-blue {
opacity: 0; opacity: 0;
animation-delay: 0.2s; animation-delay: 0.1s;
animation-name: blink; animation-name: blink;
animation-duration: 10s; animation-duration: 5s;
} }
header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-header.animated .blink-red { header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-header.animated .blink-red {
opacity: 0; opacity: 0;
animation-delay: 0.8s; animation-delay: 0.3s;
animation-name: blink; animation-name: blink;
animation-duration: 10s; animation-duration: 5s;
} }
header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-header.animated .blink-black { header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-header.animated .blink-black {
opacity: 0; opacity: 0;
animation-delay: 1.5s; animation-delay: 0.5s;
animation-name: blink; animation-name: blink;
animation-duration: 10s; animation-duration: 5s;
} }
header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-header.animated .blink-black2 { header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-header.animated .blink-black2 {
opacity: 0; opacity: 0;
animation-delay: 2s; animation-delay: 1s;
animation-name: blink; animation-name: blink;
animation-duration: 10s; animation-duration: 5s;
} }
@keyframes blink { @keyframes blink {
0%, 100% { 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 { header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-header.animated .consultation {
display: none; display: none;
animation-name: slideIn; animation-name: slideIn;
animation-delay: 1s; animation-delay: 0.5s;
animation-duration: 3s; animation-duration: 1s;
} }
@keyframes slideIn { @keyframes slideIn {
0% { 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 // Sinon, appliquer la transition après un délai, sauf si scroll
let collapseTimeout = setTimeout(() => { let collapseTimeout = setTimeout(() => {
header.classList.add('header--collapsed'); header.classList.add('header--collapsed');
}, 5000); }, 2500);
function interruptCollapseOnScroll() { function interruptCollapseOnScroll() {
if (!header.classList.contains('header--collapsed')) { if (!header.classList.contains('header--collapsed')) {
@@ -81,7 +81,7 @@ document.addEventListener('DOMContentLoaded', function() {
{ transform: 'translateX(0)' }, { transform: 'translateX(0)' },
{ transform: 'translateX(-100%)' } { transform: 'translateX(-100%)' }
], { ], {
duration: 300, duration: 200,
fill: 'forwards' fill: 'forwards'
}); });
isHidden = true; isHidden = true;
@@ -92,7 +92,7 @@ document.addEventListener('DOMContentLoaded', function() {
{ transform: 'translateX(-100%)' }, { transform: 'translateX(-100%)' },
{ transform: 'translateX(0)' } { transform: 'translateX(0)' }
], { ], {
duration: 300, duration: 200,
fill: 'forwards' fill: 'forwards'
}); });
isHidden = false; isHidden = false;
@@ -104,7 +104,7 @@ document.addEventListener('DOMContentLoaded', function() {
{ transform: 'translateY(0%)' }, { transform: 'translateY(0%)' },
{ transform: 'translateY(+100%)' } { transform: 'translateY(+100%)' }
], { ], {
duration: 300, duration: 200,
fill: 'forwards' fill: 'forwards'
}); });
isHidden = false; isHidden = false;
@@ -115,7 +115,7 @@ document.addEventListener('DOMContentLoaded', function() {
{ transform: 'translateY(100%)' }, { transform: 'translateY(100%)' },
{ transform: 'translateY(0%)' } { transform: 'translateY(0%)' }
], { ], {
duration: 300, duration: 200,
fill: 'forwards' fill: 'forwards'
}).onfinish = function() { }).onfinish = function() {
// headerNavContainer.style.display = 'none'; // 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////////////////////// /////////////////// start langswitcher position responsive//////////////////////
document.addEventListener("DOMContentLoaded", function () { document.addEventListener("DOMContentLoaded", function () {
// Fonction pour déplacer le bloc en fonction de la taille de l'écran // 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 { .blink-blue {
opacity: 0; opacity: 0;
// animation: blink 3s 3; // animation: blink 3s 3;
animation-delay: 0.2s; animation-delay: 0.1s;
animation-name: blink; animation-name: blink;
animation-duration: 10s; animation-duration: 5s;
} }
.blink-red { .blink-red {
opacity: 0; opacity: 0;
animation-delay: 0.8s; animation-delay: 0.3s;
animation-name: blink; animation-name: blink;
animation-duration: 10s; animation-duration: 5s;
} }
.blink-black { .blink-black {
opacity: 0; opacity: 0;
animation-delay: 1.5s; animation-delay: 0.5s;
animation-name: blink; animation-name: blink;
animation-duration: 10s; animation-duration: 5s;
} }
.blink-black2 { .blink-black2 {
opacity: 0; opacity: 0;
animation-delay: 2s; animation-delay: 1s;
animation-name: blink; animation-name: blink;
animation-duration: 10s; animation-duration: 5s;
} }
@keyframes blink { @keyframes blink {
0%, 100% { 0%, 100% {
@@ -49,8 +49,8 @@ header{
.consultation{ .consultation{
display: none; display: none;
animation-name: slideIn; animation-name: slideIn;
animation-delay: 1s; animation-delay: 0.5s;
animation-duration: 3s; animation-duration: 1s;
} }
@keyframes slideIn { @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; max-width: 100vw;
position: fixed; position: fixed;
top: 0; 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 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 */ // transition: height 0.3s, padding 0.3s; /* Add transition for smooth resizing */