From 8a09d17df119af4fd965c5565320ac4011264f39 Mon Sep 17 00:00:00 2001 From: ouidade Date: Fri, 12 Jul 2024 16:39:03 +0200 Subject: [PATCH] animation pilliers --- .../quartiers_de_demain/dist/assets/bundle.js | 2 +- .../dist/assets/css/bundle.css | 34 +++++++++ .../dist/assets/img/Youtube.svg | 33 +++++++++ .../dist/assets/img/linkedin.svg | 1 + .../dist/assets/img/logo_x.svg | 22 ++++++ .../dist/assets/img/pillier-1.svg | 5 +- .../dist/assets/img/pillier-2.svg | 5 +- .../dist/assets/img/pillier-3.svg | 5 +- .../src/assets/img/pillier-1.svg | 2 +- .../src/assets/img/pillier-2.svg | 2 +- .../src/assets/img/pillier-3.svg | 2 +- .../src/assets/js/animated_formes.js | 21 +++++- .../src/assets/scss/pages/home.scss | 49 ++++++++++++- .../src/assets/scss/partials/footer.scss | 69 +------------------ 14 files changed, 172 insertions(+), 80 deletions(-) create mode 100644 web/themes/custom/quartiers_de_demain/dist/assets/img/Youtube.svg create mode 100644 web/themes/custom/quartiers_de_demain/dist/assets/img/linkedin.svg create mode 100644 web/themes/custom/quartiers_de_demain/dist/assets/img/logo_x.svg diff --git a/web/themes/custom/quartiers_de_demain/dist/assets/bundle.js b/web/themes/custom/quartiers_de_demain/dist/assets/bundle.js index 60be86e..c968cd2 100644 --- a/web/themes/custom/quartiers_de_demain/dist/assets/bundle.js +++ b/web/themes/custom/quartiers_de_demain/dist/assets/bundle.js @@ -26,7 +26,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac \******************************************/ /***/ (() => { -eval("document.addEventListener('scroll', function() {\n const scrolled = window.pageYOffset;\n const background = document.getElementById('background-animated');\n \n // Adjust this value to control the speed of the parallax effect\n const parallaxSpeed = 0.2;\n background.style.transform = 'translateY(' + (scrolled * parallaxSpeed) + 'px)';\n });\n\n//# sourceURL=webpack://quartiers_de_demain/./src/assets/js/animated_formes.js?"); +eval("document.addEventListener('scroll', function() {\n const scrolled = window.pageYOffset;\n const background = document.getElementById('background-animated');\n \n // Adjust this value to control the speed of the parallax effect\n const parallaxSpeed = 0.2;\n background.style.transform = 'translateY(' + (scrolled * parallaxSpeed) + 'px)';\n});\n\n // Sélectionnez l'élément SVG\nconst svg = document.querySelector('#paragraph-id--7 .pilliers-animes');\n\n// Configuration de l'observateur d'intersection\nconst observer = new IntersectionObserver(entries => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n // Ajoute une classe lorsque l'élément est visible\n svg.classList.add('svg-visible');\n } else {\n // Optionnel : Retirez la classe si nécessaire\n svg.classList.remove('svg-visible');\n }\n });\n});\n\n// Observer l'élément SVG\nobserver.observe(svg);\n\n\n//# sourceURL=webpack://quartiers_de_demain/./src/assets/js/animated_formes.js?"); /***/ }), diff --git a/web/themes/custom/quartiers_de_demain/dist/assets/css/bundle.css b/web/themes/custom/quartiers_de_demain/dist/assets/css/bundle.css index 1ffdf2f..f0c5de5 100644 --- a/web/themes/custom/quartiers_de_demain/dist/assets/css/bundle.css +++ b/web/themes/custom/quartiers_de_demain/dist/assets/css/bundle.css @@ -2081,6 +2081,40 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h position: relative; } } +#home article.node-type-static #paragraph-id--7 .colone-picto svg #pillier-1-path365 { + stroke-dasharray: 0; /* Longueur totale du chemin */ + stroke-dashoffset: 1000; /* Décalage initial pour cacher le chemin */ + animation: fillAnimation2 10s ease forwards; /* Animation de remplissage sur 2 secondes */ + animation-delay: 5s; +} +#home article.node-type-static #paragraph-id--7 .colone-picto svg #pillier-2-path367 { + stroke-dasharray: 0; /* Longueur totale du chemin */ + stroke-dashoffset: 1000; /* Décalage initial pour cacher le chemin */ + animation: fillAnimation2 10s ease forwards; /* Animation de remplissage sur 2 secondes */ + animation-delay: 10s; +} +#home article.node-type-static #paragraph-id--7 .colone-picto svg #pillier-3-path369 { + stroke-dasharray: 0; /* Longueur totale du chemin */ + stroke-dashoffset: 1000; /* Décalage initial pour cacher le chemin */ + animation: fillAnimation2 10s ease forwards; /* Animation de remplissage sur 2 secondes */ + animation-delay: 15s; +} +@keyframes fillAnimation1 { + from { + stroke-dashoffset: 0; /* Début du chemin de décalage complet */ + } + to { + stroke-dashoffset: 1000; /* Aucun décalage, le chemin est complètement visible */ + } +} +@keyframes fillAnimation2 { + from { + stroke-dashoffset: 1000; /* Début du chemin de décalage complet */ + } + to { + stroke-dashoffset: 0; /* Aucun décalage, le chemin est complètement visible */ + } +} #home .paragraph--type--static-parts:not(#paragraph-id--7) #svg1 { display: none; } diff --git a/web/themes/custom/quartiers_de_demain/dist/assets/img/Youtube.svg b/web/themes/custom/quartiers_de_demain/dist/assets/img/Youtube.svg new file mode 100644 index 0000000..17a6c46 --- /dev/null +++ b/web/themes/custom/quartiers_de_demain/dist/assets/img/Youtube.svg @@ -0,0 +1,33 @@ + + + + + + + + + + + + + diff --git a/web/themes/custom/quartiers_de_demain/dist/assets/img/linkedin.svg b/web/themes/custom/quartiers_de_demain/dist/assets/img/linkedin.svg new file mode 100644 index 0000000..e378845 --- /dev/null +++ b/web/themes/custom/quartiers_de_demain/dist/assets/img/linkedin.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/web/themes/custom/quartiers_de_demain/dist/assets/img/logo_x.svg b/web/themes/custom/quartiers_de_demain/dist/assets/img/logo_x.svg new file mode 100644 index 0000000..8d9da4a --- /dev/null +++ b/web/themes/custom/quartiers_de_demain/dist/assets/img/logo_x.svg @@ -0,0 +1,22 @@ + + + + + + diff --git a/web/themes/custom/quartiers_de_demain/dist/assets/img/pillier-1.svg b/web/themes/custom/quartiers_de_demain/dist/assets/img/pillier-1.svg index 76db28e..4ac1c71 100644 --- a/web/themes/custom/quartiers_de_demain/dist/assets/img/pillier-1.svg +++ b/web/themes/custom/quartiers_de_demain/dist/assets/img/pillier-1.svg @@ -24,9 +24,10 @@ id="g1" transform="translate(-466.57886,-7752.7755)"> diff --git a/web/themes/custom/quartiers_de_demain/dist/assets/img/pillier-2.svg b/web/themes/custom/quartiers_de_demain/dist/assets/img/pillier-2.svg index 2e86520..2abcfd4 100644 --- a/web/themes/custom/quartiers_de_demain/dist/assets/img/pillier-2.svg +++ b/web/themes/custom/quartiers_de_demain/dist/assets/img/pillier-2.svg @@ -24,9 +24,10 @@ id="g1" transform="translate(-1070.391,-8142.9767)"> diff --git a/web/themes/custom/quartiers_de_demain/dist/assets/img/pillier-3.svg b/web/themes/custom/quartiers_de_demain/dist/assets/img/pillier-3.svg index f6e4df0..68307a9 100644 --- a/web/themes/custom/quartiers_de_demain/dist/assets/img/pillier-3.svg +++ b/web/themes/custom/quartiers_de_demain/dist/assets/img/pillier-3.svg @@ -24,9 +24,10 @@ id="g1" transform="translate(-1617.5417,-7752.7755)"> diff --git a/web/themes/custom/quartiers_de_demain/src/assets/img/pillier-1.svg b/web/themes/custom/quartiers_de_demain/src/assets/img/pillier-1.svg index 76db28e..936e0d8 100644 --- a/web/themes/custom/quartiers_de_demain/src/assets/img/pillier-1.svg +++ b/web/themes/custom/quartiers_de_demain/src/assets/img/pillier-1.svg @@ -26,7 +26,7 @@ diff --git a/web/themes/custom/quartiers_de_demain/src/assets/img/pillier-2.svg b/web/themes/custom/quartiers_de_demain/src/assets/img/pillier-2.svg index 2e86520..ff56756 100644 --- a/web/themes/custom/quartiers_de_demain/src/assets/img/pillier-2.svg +++ b/web/themes/custom/quartiers_de_demain/src/assets/img/pillier-2.svg @@ -26,7 +26,7 @@ diff --git a/web/themes/custom/quartiers_de_demain/src/assets/img/pillier-3.svg b/web/themes/custom/quartiers_de_demain/src/assets/img/pillier-3.svg index f6e4df0..0c9476b 100644 --- a/web/themes/custom/quartiers_de_demain/src/assets/img/pillier-3.svg +++ b/web/themes/custom/quartiers_de_demain/src/assets/img/pillier-3.svg @@ -26,7 +26,7 @@ diff --git a/web/themes/custom/quartiers_de_demain/src/assets/js/animated_formes.js b/web/themes/custom/quartiers_de_demain/src/assets/js/animated_formes.js index 096eabd..977cf2b 100644 --- a/web/themes/custom/quartiers_de_demain/src/assets/js/animated_formes.js +++ b/web/themes/custom/quartiers_de_demain/src/assets/js/animated_formes.js @@ -5,4 +5,23 @@ document.addEventListener('scroll', function() { // Adjust this value to control the speed of the parallax effect const parallaxSpeed = 0.2; background.style.transform = 'translateY(' + (scrolled * parallaxSpeed) + 'px)'; - }); \ No newline at end of file +}); + + // Sélectionnez l'élément SVG +const svg = document.querySelector('#paragraph-id--7 .pilliers-animes'); + +// Configuration de l'observateur d'intersection +const observer = new IntersectionObserver(entries => { + entries.forEach(entry => { + if (entry.isIntersecting) { + // Ajoute une classe lorsque l'élément est visible + svg.classList.add('svg-visible'); + } else { + // Optionnel : Retirez la classe si nécessaire + svg.classList.remove('svg-visible'); + } + }); +}); + +// Observer l'élément SVG +observer.observe(svg); diff --git a/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/home.scss b/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/home.scss index d2f5ca6..995c28a 100644 --- a/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/home.scss +++ b/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/home.scss @@ -506,6 +506,7 @@ top: 50px; position: relative; } + } svg:nth-of-type(2){ grid-row: 3; @@ -521,6 +522,8 @@ padding-left: 1rem; } + + } svg:nth-of-type(3){ grid-row: 1 /span 2; @@ -538,6 +541,7 @@ padding-left: 1rem; position: relative; } + } p:nth-of-type(1){ grid-row: 3; @@ -571,6 +575,44 @@ } } } + #paragraph-id--7 .colone-picto svg #pillier-1-path365{ + stroke-dasharray: 0; /* Longueur totale du chemin */ + stroke-dashoffset: 1000; /* Décalage initial pour cacher le chemin */ + animation: fillAnimation2 10s ease forwards; /* Animation de remplissage sur 2 secondes */ + animation-delay: 5s; + + } + #paragraph-id--7 .colone-picto svg #pillier-2-path367{ + stroke-dasharray: 0; /* Longueur totale du chemin */ + stroke-dashoffset: 1000; /* Décalage initial pour cacher le chemin */ + animation: fillAnimation2 10s ease forwards; /* Animation de remplissage sur 2 secondes */ + animation-delay: 10s; + } + #paragraph-id--7 .colone-picto svg #pillier-3-path369{ + stroke-dasharray: 0; /* Longueur totale du chemin */ + stroke-dashoffset: 1000; /* Décalage initial pour cacher le chemin */ + animation: fillAnimation2 10s ease forwards; /* Animation de remplissage sur 2 secondes */ + animation-delay: 15s; + + } + + @keyframes fillAnimation1 { + from { + stroke-dashoffset: 0; /* Début du chemin de décalage complet */ + } + to { + stroke-dashoffset: 1000; /* Aucun décalage, le chemin est complètement visible */ + } + } + @keyframes fillAnimation2 { + from { + stroke-dashoffset: 1000; /* Début du chemin de décalage complet */ + } + to { + stroke-dashoffset: 0; /* Aucun décalage, le chemin est complètement visible */ + } + } + } .paragraph--type--static-parts:not(#paragraph-id--7){ @@ -579,4 +621,9 @@ } } -} \ No newline at end of file +} + + + + + diff --git a/web/themes/custom/quartiers_de_demain/src/assets/scss/partials/footer.scss b/web/themes/custom/quartiers_de_demain/src/assets/scss/partials/footer.scss index d8de98a..291aef7 100644 --- a/web/themes/custom/quartiers_de_demain/src/assets/scss/partials/footer.scss +++ b/web/themes/custom/quartiers_de_demain/src/assets/scss/partials/footer.scss @@ -1,33 +1,5 @@ footer{ z-index: 100; - - // span.totop { - // display: inline-flex; - // width: 100vw; - // #toTop{ - // margin: auto; - // background-color: #fff; - // border-top-left-radius: 10%; - // border-top-right-radius: 10%; - // padding-bottom: 0.5rem; - // .arrow-up{ - // font-size: 1.7rem; - // line-height: 2.5rem; - // text-align: center; - // width: 4rem; - // height: 2rem; - // display: inline-block; - // text-align: top; - - // &::before{ - // content:url("/themes/custom/quartiers_de_demain/src/assets/img/up-arrow.svg") ; - - // // width: 20%; - // } - // } - - // } - // } } .footer{ @@ -73,55 +45,16 @@ footer{ height: fit-content; margin: auto; padding-left: 2rem; - // @media(max-width: 700px){ - // height: $header-height-pad; - // } - // > div { - // width: 100%; - // height: 100%; - // > a { - // display: flex; - // align-items: center; - // justify-content: center; - // width: 100%; - // height: 100%; - // > img { - // padding: 0 2rem; - // width: 100%; - // height: auto; - // @media(max-width: 700px){ - // padding: 0; - // } - // } - // } - // } + img{ width: auto; height: 65px; padding-left: 1rem; - // @media(max-width: 700px){ - // height: $header-height-pad; - // } - // @media(max-width: 660px){ - // height: $header-height-small; - // } - // @media(max-width: 450px){ - // height: $header-height-ultrasmall; - // } } } img{ width: auto; height: 150px; - // @media(max-width: 700px){ - // height: $header-height-pad; - // } - // @media(max-width: 660px){ - // height: $header-height-small; - // } - // @media(max-width: 450px){ - // height: $header-height-ultrasmall; - // } } }