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 12:01:00 +01:00
parent 09a1e18f16
commit 4d4ccb80a9
7 changed files with 147 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

102
web/themes/custom/quartiers_de_demain/src/assets/img/formes-animees-original.svg 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-live');
const background = document.getElementById('background-animated');
if (background) {
// Adjust this value to control the speed of the parallax effect
const parallaxSpeed = 0.5;

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

@@ -1,44 +1,46 @@
#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;
}
}
////////////////////////// start ///////////
// #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;
// }
// }
////////////////////////// end e///////////
// .not-visible{
// @media (max-width:1100px) {
// display: none;