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 11daa9c..28d9d93 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 if (background) {\n // Adjust this value to control the speed of the parallax effect\n const parallaxSpeed = 0.5;\n background.style.transform = 'translateY(' + (scrolled * parallaxSpeed) + 'px)';\n }\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\nif (svg) {\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.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\n observer.observe(svg);\n \n}\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-live');\n if (background) {\n // Adjust this value to control the speed of the parallax effect\n const parallaxSpeed = 0.5;\n background.style.transform = 'translateY(' + (scrolled * parallaxSpeed) + 'px)';\n }\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\nif (svg) {\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.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\n observer.observe(svg);\n \n}\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 46dc0b8..8589402 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 @@ -1693,7 +1693,7 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h } } -#home #background-animated { +#home #background-animated-live { position: absolute; top: 1500px; left: 200px; @@ -1702,11 +1702,11 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h z-index: 2; /* S'assure que l'élément soit au-dessus */ } @media (max-width: 1400px) { - #home #background-animated { + #home #background-animated-live { display: none; } } -#home #background-animated svg { +#home #background-animated-live svg { max-width: 100%; position: relative; top: -1500px; @@ -2572,6 +2572,20 @@ body { #home .paragraph--type--static-parts:not(#paragraph-id--7) #svg1 { display: none; } +#home #live-youtube { + width: 60%; + margin: auto; + margin-left: 14rem; +} +#home #live-youtube h2 { + text-align: center; + font-size: 1.5rem; + font-family: "gilroy-semibold"; +} +#home #live-youtube .field_field_descritpion { + margin-bottom: 2rem; +} + #consultation { background-color: #f6f7f3; } diff --git a/web/themes/custom/quartiers_de_demain/dist/assets/img/formes-animees-live.svg b/web/themes/custom/quartiers_de_demain/dist/assets/img/formes-animees-live.svg new file mode 100644 index 0000000..a4133a8 --- /dev/null +++ b/web/themes/custom/quartiers_de_demain/dist/assets/img/formes-animees-live.svg @@ -0,0 +1,102 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 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 0ffb76a..6e4da8d 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 @@ -1,6 +1,6 @@ document.addEventListener('scroll', function() { const scrolled = window.pageYOffset; - const background = document.getElementById('background-animated'); + const background = document.getElementById('background-animated-live'); if (background) { // Adjust this value to control the speed of the parallax effect const parallaxSpeed = 0.5; 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 848940c..9383583 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 @@ -697,6 +697,21 @@ // display: none; } + #live-youtube{ + width: 60%; + margin: auto; + margin-left: 14rem; + h2{ + text-align: center; + font-size: 1.5rem; + font-family: "gilroy-semibold"; + + } + .field_field_descritpion{ + margin-bottom: 2rem; + } + } + } diff --git a/web/themes/custom/quartiers_de_demain/src/assets/scss/partials/formes-animees.scss b/web/themes/custom/quartiers_de_demain/src/assets/scss/partials/formes-animees.scss index d58f00c..22d02b4 100644 --- a/web/themes/custom/quartiers_de_demain/src/assets/scss/partials/formes-animees.scss +++ b/web/themes/custom/quartiers_de_demain/src/assets/scss/partials/formes-animees.scss @@ -1,23 +1,44 @@ #home{ +/////////////////start à remettre après fin live /////////////// + // #background-animated { + // // display: none; + // position: absolute; + // top: 1500px; + // left: 200px; + // width: 90%; + // // height: 100%; + // pointer-events: none; /* Permet de cliquer à travers l'élément */ + // z-index: 2; /* S'assure que l'élément soit au-dessus */ + // @media(max-width: 1400px){ + // display: none; + // } + // svg{ + // max-width: 100%; + // position: relative; + // top: -1500px; + // } + // } - #background-animated { - // display: none; - position: absolute; - top: 1500px; - left: 200px; - width: 90%; - // height: 100%; - pointer-events: none; /* Permet de cliquer à travers l'élément */ - z-index: 2; /* S'assure que l'élément soit au-dessus */ - @media(max-width: 1400px){ - display: none; - } - svg{ - max-width: 100%; - position: relative; - top: -1500px; +////////////////////////// end à remettre après fin live/////////// + #background-animated-live { + // display: none; + position: absolute; + top: 1500px; + left: 200px; + width: 90%; + // height: 100%; + pointer-events: none; /* Permet de cliquer à travers l'élément */ + z-index: 2; /* S'assure que l'élément soit au-dessus */ + @media(max-width: 1400px){ + display: none; } + svg{ + max-width: 100%; + position: relative; + top: -1500px; } + } + // .not-visible{ // @media (max-width:1100px) { // display: none; @@ -32,4 +53,7 @@ .layout-container.home { position: relative; } -} \ No newline at end of file + + + +} diff --git a/web/themes/custom/quartiers_de_demain/templates/page--front.html.twig b/web/themes/custom/quartiers_de_demain/templates/page--front.html.twig index 876f336..606f998 100644 --- a/web/themes/custom/quartiers_de_demain/templates/page--front.html.twig +++ b/web/themes/custom/quartiers_de_demain/templates/page--front.html.twig @@ -82,11 +82,15 @@ {{ page.content }} {# /.layout-content #} -
+ {#
{% include active_theme_path() ~ '/dist/assets/img/formes-animees.svg' %} +
#} +
+ {% include active_theme_path() ~ '/dist/assets/img/formes-animees-live.svg' %} +
- + {% if page.sidebar_first %}