From 7d48a18ff0be136afa47de1d5cda145499110384 Mon Sep 17 00:00:00 2001 From: ouidade Date: Thu, 11 Jul 2024 16:16:12 +0200 Subject: [PATCH] paralax fond --- .../quartiers_de_demain/dist/assets/bundle.js | 2 +- .../dist/assets/css/bundle.css | 117 ++++-------------- .../dist/assets/img/formes-animees-1.svg | 5 +- .../dist/assets/img/formes-animees.svg | 55 ++++++-- .../src/assets/js/animated_formes.js | 19 ++- .../src/assets/scss/pages/home.scss | 114 ++++++++--------- .../assets/scss/partials/formes-animees.scss | 52 ++++---- .../src/assets/scss/partials/timeline.scss | 44 +++---- .../config-pages--diaporama-home.html.twig | 2 +- .../templates/page--front.html.twig | 4 +- 10 files changed, 192 insertions(+), 222 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 ed848af..60be86e 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(\"DOMContentLoaded\", function() {\n// const pathToRotate = document.getElementById('path257');\n// let rotationAngle = 0;\n\n// // function rotatePath() {\n// // rotationAngle += 1; // Augmente l'angle de rotation\n// // pathToRotate.setAttribute('transform', `translate(1460.9323, 1201.6543) rotate(${rotationAngle}, 5, -10)`); // Applique la transformation de rotation\n// // }\n\n// // setInterval(rotatePath, 10); // Appelle la fonction rotatePath toutes les 10 millisecondes (ajustez selon vos besoins)\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//# 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 a349cb9..b178445 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 @@ -1053,32 +1053,6 @@ footer { cursor: grab; } } -#home .__container-deroulement::before { - content: url("../img/formes-animees-6.svg"); - display: block; - position: absolute; - z-index: 5; - right: 20%; - top: 2rem; -} -@media (max-width: 810px) { - #home .__container-deroulement::before { - display: none; - } -} -#home .__container-deroulement::after { - content: url("../img/formes-animees-7.svg"); - display: block; - position: absolute; - z-index: 5; - right: 26%; - bottom: -9rem; -} -@media (max-width: 810px) { - #home .__container-deroulement::after { - display: none; - } -} #home .__container-deroulement h2 { width: fit-content; margin: auto; @@ -1453,22 +1427,37 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h } } +#home #background-animated { + position: absolute; + top: 600px; + left: 0; + width: 100%; + height: 100%; + pointer-events: none; /* Permet de cliquer à travers l'élément */ + z-index: 5; /* S'assure que l'élément soit au-dessus */ +} +@media (max-width: 810px) { + #home #background-animated { + top: 1820px; + } +} +#home #background-animated svg { + max-width: 100%; + position: relative; + top: -1500px; +} +#home .layout-content { + position: relative; + z-index: 2; /* S'assure que le contenu soit au-dessus des animations */ +} +#home .layout-container.home { + position: relative; +} + /*pages*/ #home .config_pages--type--diaporama-home { position: relative; } -#home .config_pages--type--diaporama-home #svg1 { - position: absolute; - z-index: 5; - right: 11rem; - bottom: -8rem; - width: 50%; -} -@media (max-width: 810px) { - #home .config_pages--type--diaporama-home #svg1 { - display: none; - } -} #home .config_pages--type--diaporama-home .field_field_images img { width: 100%; height: auto; @@ -1499,19 +1488,6 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h flex-wrap: wrap; position: relative; } -#home article.node-type-static .field_body::after { - content: url("../img/formes-animees-2.svg"); - display: block; - position: absolute; - z-index: 5; - left: 1rem; - bottom: 0; -} -@media (max-width: 810px) { - #home article.node-type-static .field_body::after { - display: none; - } -} @media (max-width: 1090px) { #home article.node-type-static .field_body { flex-direction: column; @@ -1565,19 +1541,6 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h position: relative; padding-bottom: 6rem; } -#home article.node-type-static #paragraph-id--1::after { - content: url("../img/formes-animees-3.svg"); - display: block; - position: absolute; - z-index: 5; - right: 15%; - bottom: 45%; -} -@media (max-width: 810px) { - #home article.node-type-static #paragraph-id--1::after { - display: none; - } -} #home article.node-type-static #paragraph-id--1 .field_field_title { font-family: "gilroy-bold"; } @@ -1810,32 +1773,6 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h padding-bottom: 2rem; position: relative; } -#home article.node-type-static #paragraph-id--6::before { - content: url("../img/formes-animees-4.svg"); - display: block; - position: absolute; - z-index: 5; - left: 10%; - top: -6rem; -} -@media (max-width: 810px) { - #home article.node-type-static #paragraph-id--6::before { - display: none; - } -} -#home article.node-type-static #paragraph-id--6::after { - content: url("../img/formes-animees-5.svg"); - display: block; - position: absolute; - z-index: 5; - right: 15%; - top: 3rem; -} -@media (max-width: 810px) { - #home article.node-type-static #paragraph-id--6::after { - display: none; - } -} @media (max-width: 500px) { #home article.node-type-static #paragraph-id--6 { width: 90%; diff --git a/web/themes/custom/quartiers_de_demain/dist/assets/img/formes-animees-1.svg b/web/themes/custom/quartiers_de_demain/dist/assets/img/formes-animees-1.svg index 1860871..61a8c07 100644 --- a/web/themes/custom/quartiers_de_demain/dist/assets/img/formes-animees-1.svg +++ b/web/themes/custom/quartiers_de_demain/dist/assets/img/formes-animees-1.svg @@ -4,8 +4,8 @@ @@ -34,5 +34,6 @@ style="fill:none;stroke:#f7002b;stroke-width:137.482;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" transform="matrix(1.3333333,0,0,-1.3333333,1460.9323,1201.6543)" clip-path="url(#clipPath258)" /> + diff --git a/web/themes/custom/quartiers_de_demain/dist/assets/img/formes-animees.svg b/web/themes/custom/quartiers_de_demain/dist/assets/img/formes-animees.svg index 3ebac3c..796be9f 100644 --- a/web/themes/custom/quartiers_de_demain/dist/assets/img/formes-animees.svg +++ b/web/themes/custom/quartiers_de_demain/dist/assets/img/formes-animees.svg @@ -7,9 +7,43 @@ width="100%" height="100%" viewBox="0 0 2560.2766 11997.26" - preserveAspectRatio="xMinYMin meet" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"> + + + + + + + + + + + + + + @@ -17,7 +51,7 @@ id="path148" d="M 0,0 211.55,177.512" style="fill:none;stroke:#0833c2;stroke-width:70;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" - transform="matrix(1.3333333,0,0,-1.3333333,1686.6035,9630)" /> + transform="matrix(1.3333333,0,0,-1.3333333,1686.6035,8250)" /> + transform="matrix(1.3333333,0,0,-1.3333333,219.88347,2300)" /> + transform="matrix(1.3333333,0,0,-1.3333333,247.22107,5400)" /> {{ content }} - {% include active_theme_path() ~ '/dist/assets/img/formes-animees-1.svg' %} + {# {% include active_theme_path() ~ '/dist/assets/img/formes-animees-1.svg' %} #} 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 413e923..b9f805e 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 @@ -81,9 +81,9 @@ #} {{ page.content }} {# /.layout-content #} - {#
+
{% include active_theme_path() ~ '/dist/assets/img/formes-animees.svg' %} -
#} +
{% if page.sidebar_first %}