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

premier jet animation header

Browse Source
This commit is contained in:
Ouidade Soussi Chiadmi
2024-07-09 14:21:47 +02:00
parent 3c6e013ff4
commit d2fbdb7c3c
7 changed files with 229 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

File diff suppressed because one or more lines are too long

46
web/themes/custom/quartiers_de_demain/dist/assets/css/bundle.css vendored
View File

@@ -1281,6 +1281,52 @@ footer {
top: 60px;
}
header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-header.animated {
transform: scale(2);
}
header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-header.animated .blink-blue {
animation-delay: 0.2s;
animation-name: blink;
animation-duration: 5s;
}
header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-header.animated .blink-red {
animation-delay: 0.4s;
animation-name: blink;
animation-duration: 5s;
}
header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-header.animated .blink-black {
animation-delay: 0.6s;
animation-name: blink;
animation-duration: 5s;
}
header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-header.animated .blink-black2 {
animation-delay: 0.8s;
animation-name: blink;
animation-duration: 5s;
}
@keyframes blink {
0%, 100% {
opacity: 0;
}
50% {
opacity: 1;
}
}
header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-header.animated .consultation {
display: none;
animation-name: slideIn;
animation-delay: 1s;
animation-duration: 3s;
}
@keyframes slideIn {
0% {
transform: translateX(0px);
}
100% {
transform: translateX(600px);
}
}
/*pages*/
#home .content_container #block-quartiers-de-demain-titredepage {
display: none;

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

@@ -38,10 +38,65 @@
// });
//////// 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)');
// 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 {
startLogoAnimation();
}
}
// 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();
}
});
});
observer.observe(header, { attributes: true });
// Autres fonctions et initialisations ici
});
document.addEventListener('DOMContentLoaded', function() {
const header = document.querySelector('header');
// const logo = document.querySelector('.qdd-header');
// console.log(logo);
// 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 la page a été rechargée ou si c'est une navigation interne
const isFirstLoad = !performance.getEntriesByType("navigation")[0].type.includes('back_forward');
// Vérifier si nous sommes sur la page cible
@@ -50,13 +105,16 @@
// 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');
// logo.classList.remove('animated');
stopLogoAnimation();
} else {
// Sinon, appliquer la transition après un délai
setTimeout(() => {
header.classList.add('header--collapsed');
}, 1000); // Attendre 1 seconde avant de réduire la taille du header
}, 5000); // Attendre 1 seconde avant de réduire la taille du header
}
// Gestion du scroll pour afficher/masquer le header nav
const headerNavContainer = document.querySelector('.header_nav_container');

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

@@ -0,0 +1,73 @@
header{
#block-quartiers-de-demain-logoquartiersdedemain{
.field_field_logo{
.qdd-header{
&.animated{
transform: scale(2);
.blink-blue {
// animation: blink 3s 3;
animation-delay: 0.2s;
animation-name: blink;
animation-duration: 5s;
}
.blink-red {
animation-delay: 0.4s;
animation-name: blink;
animation-duration: 5s;
}
.blink-black {
animation-delay: 0.6s;
animation-name: blink;
animation-duration: 5s;
}
.blink-black2 {
animation-delay: 0.8s;
animation-name: blink;
animation-duration: 5s;
}
@keyframes blink {
0%, 100% {
opacity: 0;
}
50% {
opacity: 1;
}
}
.consultation{
display: none;
animation-name: slideIn;
animation-delay: 1s;
animation-duration: 3s;
}
@keyframes slideIn {
0%{
transform: translateX(0px) ;
}
100%{
transform: translateX(600px) ;
}
}
// @keyframes scale {
// 0%{
// transform: scale(2);
// }
// 90%{transform: scale(2);}
// 100% {
// transform: scale(1);
// }
// }
}
}
}
}
}

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

@@ -218,4 +218,16 @@ header{
transform-origin: bottom right; /* Origine de la transformation à l'angle bas droit */
}
}
}
// /* Initial state of SVG */
// .qdd-animated{
// opacity: 1;
// transform: scale(0.5);
// transition: opacity 0.5s, transform 0.5s;
// }
// /* Animated state of SVG */
// .header:not(.header--collapsed .header--collapsed-already) .qdd-animated {
// opacity: 1;
// transform: scale(1);
// }

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

@@ -29,6 +29,8 @@
@import "partials/slick";
@import "partials/timeline";
@import "partials/actu-caroussel-home";
@import "partials/animation-logo-header";
// @import "partials/slick_custom";

35
web/themes/custom/quartiers_de_demain/templates/field--block-content--logo-link.html.twig
View File

@@ -40,6 +40,7 @@
{# Define the SVG icon #}
{% set svg_icon %}
<svg
class='qdd-header'
width="87.153343mm"
height="29.698406mm"
viewBox="0 0 87.153343 29.698406"
@@ -51,6 +52,7 @@
id="layer1"
transform="translate(-61.433626,-104.40973)">
<g
class="consultation"
aria-label="CONSULTATION INTERNATIONALE"
id="text1410"
style="font-weight:500;font-size:4.50432px;font-family:'Gilroy Medium';-inkscape-font-specification:Gilroy-Medium;fill:#1d1d1b;stroke-width:0.118122"
@@ -146,6 +148,7 @@
id="g1420"
transform="translate(751.3907,1648.7133)">
<path
class="blink-blue"
d="m 0,0 c 16.692,16.692 43.755,16.692 60.447,0 16.692,-16.692 16.692,-43.755 0,-60.447 -16.692,-16.692 -43.755,-16.692 -60.447,0 l 7.433,7.433 c 12.587,-12.587 32.994,-12.587 45.581,0 12.587,12.587 12.587,32.994 0,45.581 -12.587,12.587 -32.994,12.587 -45.581,0 z"
style="fill:#2b21c8;fill-opacity:1;fill-rule:nonzero;stroke:none"
id="path1422" />
@@ -154,6 +157,7 @@
id="g1424"
transform="translate(1405.2317,1559.5776)">
<path
class="blink-red"
d="M 0,0 12.318,-0.061 V -46.545 H 0 Z"
style="fill:#f7002b;fill-opacity:1;fill-rule:nonzero;stroke:none"
id="path1426" />
@@ -162,6 +166,7 @@
id="g1428"
transform="translate(1148.891,1559.5776)">
<path
class="blink-blue"
d="M 0,0 12.318,-0.061 V -46.545 H 0 Z"
style="fill:#2b21c8;fill-opacity:1;fill-rule:nonzero;stroke:none"
id="path1430" />
@@ -170,6 +175,7 @@
id="g1432"
transform="translate(1059.3877,1523.8738)">
<path
class="blink-blue"
d="M 0,0 12.318,-0.061 V -46.81 H 0 Z"
style="fill:#0732c2;fill-opacity:1;fill-rule:nonzero;stroke:none"
id="path1434" />
@@ -178,6 +184,7 @@
id="g1436"
transform="translate(842.5666,1525.142)">
<path
class="blink-blue"
d="M 0,0 12.318,-0.054 V -41.613 H 0 Z"
style="fill:#0732c2;fill-opacity:1;fill-rule:nonzero;stroke:none"
id="path1438" />
@@ -186,6 +193,7 @@
id="g1440"
transform="translate(1246.5872,1623.5623)">
<path
class="blink-blue"
d="M -0.19798272,0 12.120017,-0.051 V -39.192 H -0.19798272 Z"
style="fill:#2b21c8;fill-opacity:1;fill-rule:nonzero;stroke:none"
id="path1442" />
@@ -194,6 +202,7 @@
id="g1444"
transform="translate(1050.5181,1658.2612)">
<path
class="blink-red"
d="M 0,0 12.214,-0.045 V -34.094 H 0 Z"
style="fill:#f7002b;fill-opacity:1;fill-rule:nonzero;stroke:none"
id="path1446" />
@@ -202,6 +211,7 @@
id="g1448"
transform="translate(1328.6346,1658.2612)">
<path
class="blink-red"
d="M 0,0 12.214,-0.045 V -34.094 H 0 Z"
style="fill:#f7002b;fill-opacity:1;fill-rule:nonzero;stroke:none"
id="path1450" />
@@ -210,6 +220,7 @@
id="g1452"
transform="translate(910.89509,1659.3624)">
<path
class="blink-red"
d="M 0.09799602,0 12.318,-0.061 V -46.545 H 0.09799602 Z"
style="fill:#f7002b;fill-opacity:1;fill-rule:nonzero;stroke:none"
id="path1454" />
@@ -218,15 +229,18 @@
id="g1456"
transform="translate(1121.2274,1648.2275)">
<path
class="blink-red"
d="M 0,0 0.061,10.076 H 46.545 V 0 Z"
style="fill:#f7002b;fill-opacity:1;fill-rule:nonzero;stroke:none"
id="path1458" />
</g>
<path
class="blink-blue"
d="m 1302.919,1494.638 h -26.436 v 10.895 h 26.436 z"
style="fill:#0732c2;fill-opacity:1;fill-rule:nonzero;stroke:none"
id="path1460" />
<path
class="blink-blue"
d="m 987.263,1592.995 h -26.437 v 10.895 h 26.437 z"
style="fill:#0732c2;fill-opacity:1;fill-rule:nonzero;stroke:none"
id="path1462" />
@@ -234,6 +248,7 @@
id="g1464"
transform="translate(1022.9188,1576.3727)">
<path
class="blink-black"
d="m 0,0 h -12.398 l -25.003,60.878 -0.232,0.644 -0.013,-0.043 -0.013,0.024 -0.016,-0.024 -0.014,0.043 L -37.92,60.878 -62.923,0 h -12.385 l 33.882,82.514 h 7.53 z"
style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
id="path1466" />
@@ -242,6 +257,7 @@
id="g1468"
transform="translate(817.5048,1596.5179)">
<path
class="blink-black2"
d="m 0,0 16.707,-17.04 -8.6,-8.985 -16.821,17.311 z"
style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
id="path1470" />
@@ -250,6 +266,7 @@
id="g1472"
transform="translate(923.2098,1609.196)">
<path
class="blink-black"
d="m 0,0 c 0,-13.313 -5.283,-33.449 -33.004,-33.449 -27.725,0 -33.228,20.136 -33.228,33.449 v 50.166 h 12.214 V 0 c 0,-4.953 1.099,-23.325 21.014,-23.325 19.912,0 20.792,18.372 20.792,23.325 V 16.965 H 0 Z"
style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
id="path1474" />
@@ -258,6 +275,7 @@
id="g1476"
transform="translate(1099.4768,1628.9966)">
<path
class="blink-black2"
d="m 0,0 c 0,11.111 -7.698,19.144 -17.053,19.144 h -31.906 v 10.121 h 12.215 19.803 C -0.769,29.156 12.214,16.614 12.214,0 c 0,-12.542 -7.261,-22.663 -17.712,-27.065 L 12.214,-53.249 H -1.319 l -16.173,23.984 h -19.252 v -23.984 h -12.215 v 34.105 h 31.906 C -7.698,-19.144 0,-11.222 0,0"
style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
id="path1478" />
@@ -266,15 +284,18 @@
id="g1480"
transform="translate(1161.8838,1648.1403)">
<path
class="blink-black"
d="m 0,0 v -72.393 h -12.214 l 0.002,82.514 H 25.522 V 0 Z"
style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
id="path1482" />
</g>
<path
class="blink-black2"
d="m 1206.879,1658.261 h 12.209 v -82.514 h -12.209 z"
style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
id="path1484" />
<path
class="blink-black"
d="m 1246.395,1585.868 h 54.904 v -10.121 h -54.904 z m 47.086,27.616 h -47.086 v 10.233 h 47.086 z m 7.817,34.656 h -54.904 v 10.121 h 54.904 z"
style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
id="path1486" />
@@ -282,6 +303,7 @@
id="g1488"
transform="translate(1377.5935,1628.9966)">
<path
class="blink-black2"
d="m 0,0 c 0,11.111 -7.698,19.144 -17.053,19.144 h -31.906 v 10.121 h 12.215 19.803 C -0.769,29.156 12.214,16.614 12.214,0 c 0,-12.542 -7.261,-22.663 -17.712,-27.065 L 12.214,-53.249 H -1.319 l -16.173,23.984 h -19.252 v -23.984 h -12.215 v 34.105 h 31.906 C -7.698,-19.144 0,-11.222 0,0"
style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
id="path1490" />
@@ -290,15 +312,18 @@
id="g1492"
transform="translate(1474.0773,1591.0393)">
<path
class="blink-black2"
d="m 0,0 c -3.958,-9.344 -15.055,-15.17 -28.897,-15.292 v 10.124 c 9.546,0.117 15.148,3.636 17.454,9.129 1.761,4.072 0.33,8.472 0.221,8.581 -2.312,6.381 -8.693,7.812 -17.713,10.562 -10.232,3.08 -22.005,5.613 -25.854,16.393 -2.094,5.61 -1.54,12.103 1.319,17.383 6.381,12.103 22.663,12.435 24.535,12.435 12.1,0 22.881,-5.282 30.584,-13.754 l -8.03,-8.031 c -4.514,6.602 -13.313,11.662 -22.554,11.662 -0.111,0 -9.794,0 -13.534,-7.041 -1.431,-2.751 -1.76,-6.381 -0.771,-9.244 2.203,-6.048 8.472,-7.479 17.274,-10.121 C -15.513,29.594 -3.742,27.174 0.439,16.063 0.769,15.292 3.41,7.812 0,0"
style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
id="path1494" />
</g>
<path
class="blink-black"
d="m 842.567,1487.123 h 54.904 v -10.121 h -54.904 z m 47.086,27.615 h -47.086 v 10.233 h 47.086 z m 7.817,34.657 h -54.904 v 10.121 h 54.904 z"
style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
id="path1496" />
<path
class="blink-black"
d="m 1059.388,1487.185 h 54.904 v -10.121 h -54.904 z m 47.086,27.615 h -47.086 v 10.233 h 47.086 z m 7.817,34.657 h -54.904 v 10.121 h 54.904 z"
style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
id="path1498" />
@@ -306,6 +331,7 @@
id="g1500"
transform="translate(1148.891,1514.2576)">
<path
class="blink-black2"
d="M 0,0 12.318,-0.051 V -37.194 H 0 Z M 86.754,45.32 V -37.194 H 74.545 V 24.748 L 46.841,-37.194 H 39.912 L 0,45.32 H 14.731 L 43.322,-17.127 70.533,45.32 Z"
style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
id="path1502" />
@@ -314,11 +340,13 @@
id="g1504"
transform="translate(1338.3157,1477.0637)">
<path
class="blink-black"
d="m 0,0 h -12.398 l -25.003,60.878 -0.232,0.644 -0.013,-0.043 -0.013,0.024 -0.016,-0.024 -0.014,0.043 L -37.92,60.878 -62.923,0 h -12.385 l 33.882,82.514 h 7.53 z"
style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
id="path1506" />
</g>
<path
class="blink-black"
d="m 1365.716,1559.578 h 12.209 v -82.514 h -12.209 z"
style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
id="path1508" />
@@ -326,6 +354,7 @@
id="g1510"
transform="translate(1405.2317,1513.6991)">
<path
class="blink-black2"
d="M 0,0 12.318,-0.048 V -36.635 H 0 Z M 71.292,45.879 V -36.635 H 56.55 L 0,45.879 h 14.744 l 44.333,-65.68 v 65.68 z"
style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
id="path1512" />
@@ -334,6 +363,7 @@
id="g1514"
transform="translate(781.6142,1575.7473)">
<path
class="blink-black2"
d="m 0,0 c -23.606,0 -42.742,19.136 -42.742,42.742 0,23.606 19.136,42.743 42.742,42.743 23.606,0 42.742,-19.137 42.742,-42.743 H 32.231 C 32.231,60.543 17.8,74.973 0,74.973 c -17.8,0 -32.231,-14.43 -32.231,-32.231 0,-17.8 14.431,-32.23 32.231,-32.23 z"
style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
id="path1516" />
@@ -342,6 +372,7 @@
id="g1518"
transform="translate(1445.9412,1575.62)">
<path
class="blink-blue"
d="m 0,0 c -0.872,0.021 -21.482,0.684 -31.741,13.637 l 8.115,6.427 c 7.23,-9.132 23.728,-9.712 23.895,-9.717 z"
style="fill:#0732c2;fill-opacity:1;fill-rule:nonzero;stroke:none"
id="path1520" />
@@ -350,6 +381,7 @@
id="g1522"
transform="translate(747.5991,1522.7208)">
<path
class="blink-red"
d="M 0,0 12.318,-0.063 V -48.422 H 0 Z"
style="fill:#f7002b;fill-opacity:1;fill-rule:nonzero;stroke:none"
id="path1524" />
@@ -358,6 +390,7 @@
id="g1526"
transform="translate(746.9782,1556.9387)">
<path
class="blink-black"
d="m 0,0 h 31.214 c 23.606,0 42.742,-18.5 42.742,-41.32 0,-22.821 -19.136,-41.32 -42.742,-41.32 H 0.444 v 10.162 h 30.77 c 17.801,0 32.231,13.95 32.231,31.158 0,17.208 -14.43,31.158 -32.231,31.158 H 0"
style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
id="path1528" />
@@ -366,6 +399,7 @@
id="g1530"
transform="translate(960.9559,1530.3488)">
<path
class="blink-red"
d="M 0,0 12.318,-0.07 V -53.265 H 0 Z"
style="fill:#f7002b;fill-opacity:1;fill-rule:nonzero;stroke:none"
id="path1532" />
@@ -374,6 +408,7 @@
id="g1534"
transform="translate(960.335,1559.7245)">
<path
class="blink-black2"
d="m 0,0 h 31.214 c 23.606,0 42.742,-18.5 42.742,-41.32 0,-22.821 -19.136,-41.321 -42.742,-41.321 H 0.444 v 10.163 h 30.77 c 17.801,0 32.231,13.95 32.231,31.158 0,17.208 -14.43,31.158 -32.231,31.158 H 0"
style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
id="path1536" />