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

css live

Browse Source
This commit is contained in:
Ouidade Soussi Chiadmi 2025-03-02 11:55:32 +01:00
parent 4fff17098f
commit 09a1e18f16
7 changed files with 183 additions and 24 deletions
Show Stats 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

@ -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?");
/***/ }),

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

@ -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;
}

102
web/themes/custom/quartiers_de_demain/dist/assets/img/formes-animees-live.svg vendored Normal file
View File

@ -0,0 +1,102 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
version="1.1"
id="svg1"
width="2560.2766"
height="11997.26"
viewBox="0 0 2560.2766 11997.26"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<defs
id="defs1">
<clipPath
clipPathUnits="userSpaceOnUse"
id="clipPath255">
<path
d="M 0,0 H 1920 V 9000 H 0 Z"
transform="translate(-1378.7554,-1136.295)"
id="path255" />
</clipPath>
<clipPath
clipPathUnits="userSpaceOnUse"
id="clipPath258">
<path
d="M 0,0 H 1920 V 9000 H 0 Z"
transform="translate(-1095.6993,-8098.7595)"
id="path258" />
</clipPath>
<clipPath
clipPathUnits="userSpaceOnUse"
id="clipPath301">
<path
d="M 0,0 H 1920 V 9000 H 0 Z"
transform="translate(-1476.5001,-5895.4337)"
id="path301" />
</clipPath>
<clipPath
clipPathUnits="userSpaceOnUse"
id="clipPath303">
<path
d="M 0,0 H 1920 V 9000 H 0 Z"
transform="translate(-1623.8512,-4272.9005)"
id="path303" />
</clipPath>
</defs>
<g
id="g1"
transform="translate(0.17944336,-2.9196463)">
<path
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,9061.9695)" />
<path
id="path151"
d="M 0,0 V -174.775"
style="fill:none;stroke:#0833c2;stroke-width:85;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
transform="matrix(1.3333333,0,0,-1.3333333,2083.6333,1370.6667)" />
<path
id="path254"
d="M 0,0 C 0,205.098 -166.265,371.361 -371.362,371.361"
style="fill:none;stroke:#000000;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,1838.3405,10484.94)"
clip-path="url(#clipPath255)" />
<path
id="path256"
d="M 0,0 177.512,-211.551"
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,219.88347,2415.4232)" />
<path
id="path257"
d="M 0,0 C -205.098,0 -371.361,-166.265 -371.361,-371.362"
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)" />
<path
id="path300"
d="M 0,0 C 0,-126.805 102.795,-229.6 229.6,-229.6"
style="fill:none;stroke:#f7002b;stroke-width:85;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
transform="matrix(1.3333333,0,0,-1.3333333,1968.6667,4139.4219)"
clip-path="url(#clipPath301)" />
<path
id="path302"
d="M 0,0 C 0,126.805 -102.795,229.6 -229.6,229.6"
style="fill:none;stroke:#0833c2;stroke-width:85;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
transform="matrix(1.3333333,0,0,-1.3333333,2165.1349,6302.7995)"
clip-path="url(#clipPath303)" />
<path
id="path311"
d="M 0,0 V 283"
style="fill:none;stroke:#000000;stroke-width:85;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
transform="matrix(1.3333333,0,0,-1.3333333,247.22107,6014.2852)" />
<rect
style="fill:none;stroke:#000000;stroke-width:0.872103;paint-order:fill markers stroke"
id="rect717"
width="2559.4043"
height="11996.388"
x="0.25652406"
y="3.3556976" />
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 4.1 KiB

2
web/themes/custom/quartiers_de_demain/src/assets/js/animated_formes.js
View File

@ -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;

15
web/themes/custom/quartiers_de_demain/src/assets/scss/pages/home.scss
View File

@ -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;
}
}
}

58
web/themes/custom/quartiers_de_demain/src/assets/scss/partials/formes-animees.scss
View File

@ -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;
}
}
}

8
web/themes/custom/quartiers_de_demain/templates/page--front.html.twig
View File

@ -82,11 +82,15 @@
{{ page.content }}
</div>{# /.layout-content #}
<div id="background-animated" >
{# <div id="background-animated" >
{% include active_theme_path() ~ '/dist/assets/img/formes-animees.svg' %}
<img src="/themes/custom/quartiers_de_demain/dist/assets/img/formes-animees.svg" id="formes-animees"/>
</div> #}
<div id="background-animated-live" >
{% include active_theme_path() ~ '/dist/assets/img/formes-animees-live.svg' %}
<img src="/themes/custom/quartiers_de_demain/dist/assets/img/formes-animees-live.svg" id="formes-animees-live"/>
</div>
{% if page.sidebar_first %}
<aside class="layout-sidebar-first" role="complementary">
{{ page.sidebar_first }}