From 2c7bb085f8f4e90e02f59743f8d2b38997434579 Mon Sep 17 00:00:00 2001 From: ouidade Date: Thu, 18 Jul 2024 10:33:12 +0200 Subject: [PATCH] pilliers animation --- .../quartiers_de_demain/dist/assets/bundle.js | 2 +- .../dist/assets/css/bundle.css | 19 ++++++++++--------- .../src/assets/js/animated_formes.js | 8 ++++---- .../src/assets/scss/pages/home.scss | 1 + .../scss/partials/animation-pilliers.scss | 18 +++++++++--------- 5 files changed, 25 insertions(+), 23 deletions(-) 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 2bbd88a..87eb289 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 default export */ \******************************************/ /***/ (function() { -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\n\n\n //ANimation Pilliers \n// const svg = document.querySelector('#paragraph-id--7 .colone-picto');\n\n// // Configuration de l'observateur d'intersection\n// const 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('visible');\n// } else {\n// // Optionnel : Retirez la classe si nécessaire\n// svg.classList.remove('visible');\n// }\n// });\n// });\n\n// // Observer l'élément SVG\n// observer.observe(svg);\n\n//////////////////////////////////////////////////\n\n//ANimation Pilliers \nconst svg = document.querySelector('#paragraph-id--7 .colone-picto');\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.remove('invisible');\n svg.classList.add('visible');\n } \n else {\n // Optionnel : Retirez la classe si nécessaire\n svg.classList.remove('visible');\n\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?"); +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\n\n\n //ANimation Pilliers \n// const svg = document.querySelector('#paragraph-id--7 .colone-picto');\n\n// // Configuration de l'observateur d'intersection\n// const 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('visible');\n// } else {\n// // Optionnel : Retirez la classe si nécessaire\n// svg.classList.remove('visible');\n// }\n// });\n// });\n\n// // Observer l'élément SVG\n// observer.observe(svg);\n\n//////////////////////////////////////////////////\n\n//ANimation Pilliers \nconst svg = document.querySelector('#paragraph-id--7 .colone-picto');\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.remove('invisible');\n svg.classList.add('visible');\n } \n // else {\n // // Optionnel : Retirez la classe si nécessaire\n // svg.classList.remove('visible');\n\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 e1e4c18..31ec263 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 @@ -1511,37 +1511,37 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h opacity: 0; } #home .visible h5:nth-of-type(1) { - animation: Appear 1s 0.2s forwards; + animation: Appear 1s 0s forwards; } #home .visible svg #pillier-1-path365 { stroke-dasharray: 1000; /* Longueur totale du chemin */ stroke-dashoffset: 1000; /* Décalage initial pour cacher le chemin */ - animation: Appear 1s 1.5s forwards, fillAnimation 3s 1.5s ease-in-out forwards; /* Animation de remplissage sur 2 secondes */ + animation: Appear 1s 0.2s forwards, fillAnimation 2s 0.2s ease-in-out forwards; /* Animation de remplissage sur 2 secondes */ } #home .visible p:nth-of-type(1) { - animation: Appear 1.5s 3s forwards; + animation: Appear 1s 1s forwards; } #home .visible h5:nth-of-type(2) { - animation: Appear 1s 4s forwards; + animation: Appear 1s 2s forwards; } #home .visible svg #pillier-2-path367 { stroke-dasharray: 1000; /* Longueur totale du chemin */ stroke-dashoffset: 1000; /* Décalage initial pour cacher le chemin */ - animation: Appear 1s 5s forwards, fillAnimation 3s 5s ease-in-out forwards; /* Animation de remplissage sur 2 secondes */ + animation: Appear 1s 2.2s forwards, fillAnimation 2s 2.2s ease-in-out forwards; /* Animation de remplissage sur 2 secondes */ } #home .visible p:nth-of-type(2) { - animation: Appear 1.5s 6s forwards; + animation: Appear 1s 3s forwards; } #home .visible h5:nth-of-type(3) { - animation: Appear 1s 7s forwards; + animation: Appear 1s 4s forwards; } #home .visible svg #pillier-3-path369 { stroke-dasharray: 1000; /* Longueur totale du chemin */ stroke-dashoffset: 1000; /* Décalage initial pour cacher le chemin */ - animation: Appear 1s 8s forwards, fillAnimation 3s 8s ease-in-out forwards; /* Animation de remplissage sur 2 secondes */ + animation: Appear 1s 4.2s forwards, fillAnimation 2s 4.2s ease-in-out forwards; /* Animation de remplissage sur 2 secondes */ } #home .visible p:nth-of-type(3) { - animation: Appear 1.5s 9s forwards; + animation: Appear 1s 5s forwards; } @keyframes Appear { 0% { @@ -2134,6 +2134,7 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h #home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto p:nth-of-type(3) { grid-row: 3; grid-column: 5/span 6; + max-width: 406px; } @media (max-width: 820px) { #home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto p:nth-of-type(3) { 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 6ce5f69..5de3e3d 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 @@ -42,11 +42,11 @@ const observer = new IntersectionObserver(entries => { // svg.classList.remove('invisible'); svg.classList.add('visible'); } - else { - // Optionnel : Retirez la classe si nécessaire - svg.classList.remove('visible'); + // else { + // // Optionnel : Retirez la classe si nécessaire + // svg.classList.remove('visible'); - } + // } }); }); 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 9a7e4dd..3a11460 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 @@ -535,6 +535,7 @@ p:nth-of-type(3){ grid-row: 3; grid-column: 5 /span 6; + max-width: 406px; @media(max-width: 820px){ grid-row: 9; grid-column: 1 /span 2; diff --git a/web/themes/custom/quartiers_de_demain/src/assets/scss/partials/animation-pilliers.scss b/web/themes/custom/quartiers_de_demain/src/assets/scss/partials/animation-pilliers.scss index 6692069..bb39dbe 100644 --- a/web/themes/custom/quartiers_de_demain/src/assets/scss/partials/animation-pilliers.scss +++ b/web/themes/custom/quartiers_de_demain/src/assets/scss/partials/animation-pilliers.scss @@ -12,41 +12,41 @@ .visible{ h5:nth-of-type(1) { - animation: Appear 1s 0.2s forwards; + animation: Appear 1s 0s forwards; } svg #pillier-1-path365 { stroke-dasharray: 1000; /* Longueur totale du chemin */ stroke-dashoffset: 1000; /* Décalage initial pour cacher le chemin */ - animation: Appear 1s 1.5s forwards, fillAnimation 3s 1.5s ease-in-out forwards; /* Animation de remplissage sur 2 secondes */ + animation: Appear 1s 0.2s forwards, fillAnimation 2s 0.2s ease-in-out forwards; /* Animation de remplissage sur 2 secondes */ } p:nth-of-type(1) { - animation: Appear 1.5s 3s forwards; + animation: Appear 1s 1s forwards; } h5:nth-of-type(2) { - animation: Appear 1s 4s forwards; + animation: Appear 1s 2s forwards; } svg #pillier-2-path367 { stroke-dasharray: 1000; /* Longueur totale du chemin */ stroke-dashoffset: 1000; /* Décalage initial pour cacher le chemin */ - animation: Appear 1s 5s forwards, fillAnimation 3s 5s ease-in-out forwards; /* Animation de remplissage sur 2 secondes */ + animation: Appear 1s 2.2s forwards, fillAnimation 2s 2.2s ease-in-out forwards; /* Animation de remplissage sur 2 secondes */ } p:nth-of-type(2) { - animation: Appear 1.5s 6s forwards; + animation: Appear 1s 3s forwards; } h5:nth-of-type(3) { - animation: Appear 1s 7s forwards; + animation: Appear 1s 4s forwards; } svg #pillier-3-path369 { stroke-dasharray: 1000; /* Longueur totale du chemin */ stroke-dashoffset: 1000; /* Décalage initial pour cacher le chemin */ - animation: Appear 1s 8s forwards, fillAnimation 3s 8s ease-in-out forwards; /* Animation de remplissage sur 2 secondes */ + animation: Appear 1s 4.2s forwards, fillAnimation 2s 4.2s ease-in-out forwards; /* Animation de remplissage sur 2 secondes */ } p:nth-of-type(3) { - animation: Appear 1.5s 9s forwards; + animation: Appear 1s 5s forwards; } @keyframes Appear {