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

paralax fond

This commit is contained in:
ouidade 2024-07-11 16:16:12 +02:00
parent d1d9778fc4
commit 7d48a18ff0
10 changed files with 192 additions and 222 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 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?");
/***/ }), /***/ }),

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

@ -1053,32 +1053,6 @@ footer {
cursor: grab; 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 { #home .__container-deroulement h2 {
width: fit-content; width: fit-content;
margin: auto; 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*/ /*pages*/
#home .config_pages--type--diaporama-home { #home .config_pages--type--diaporama-home {
position: relative; 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 { #home .config_pages--type--diaporama-home .field_field_images img {
width: 100%; width: 100%;
height: auto; height: auto;
@ -1499,19 +1488,6 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
flex-wrap: wrap; flex-wrap: wrap;
position: relative; 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) { @media (max-width: 1090px) {
#home article.node-type-static .field_body { #home article.node-type-static .field_body {
flex-direction: column; flex-direction: column;
@ -1565,19 +1541,6 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
position: relative; position: relative;
padding-bottom: 6rem; 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 { #home article.node-type-static #paragraph-id--1 .field_field_title {
font-family: "gilroy-bold"; font-family: "gilroy-bold";
} }
@ -1810,32 +1773,6 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
padding-bottom: 2rem; padding-bottom: 2rem;
position: relative; 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) { @media (max-width: 500px) {
#home article.node-type-static #paragraph-id--6 { #home article.node-type-static #paragraph-id--6 {
width: 90%; width: 90%;

5
web/themes/custom/quartiers_de_demain/dist/assets/img/formes-animees-1.svg vendored
View File

@ -4,8 +4,8 @@
<svg <svg
version="1.1" version="1.1"
id="svg1" id="svg1"
width="1266.1704" width="100%"
height="586.80396" height="100%"
viewBox="0 0 1266.1704 586.80395" viewBox="0 0 1266.1704 586.80395"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg"> xmlns:svg="http://www.w3.org/2000/svg">
@ -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" 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)" transform="matrix(1.3333333,0,0,-1.3333333,1460.9323,1201.6543)"
clip-path="url(#clipPath258)" /> clip-path="url(#clipPath258)" />
</g> </g>
</svg> </svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.3 KiB

After

Width:  |  Height:  |  Size: 1.3 KiB

55
web/themes/custom/quartiers_de_demain/dist/assets/img/formes-animees.svg vendored
View File

@ -7,9 +7,43 @@
width="100%" width="100%"
height="100%" height="100%"
viewBox="0 0 2560.2766 11997.26" viewBox="0 0 2560.2766 11997.26"
preserveAspectRatio="xMinYMin meet"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
xmlns:svg="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 <g
id="g1" id="g1"
transform="translate(0.17944336,-2.9196463)"> transform="translate(0.17944336,-2.9196463)">
@ -17,7 +51,7 @@
id="path148" id="path148"
d="M 0,0 211.55,177.512" 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" 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)" />
<path <path
id="path151" id="path151"
d="M 0,0 V -174.775" d="M 0,0 V -174.775"
@ -25,15 +59,15 @@
transform="matrix(1.3333333,0,0,-1.3333333,2083.6333,1370.6667)" /> transform="matrix(1.3333333,0,0,-1.3333333,2083.6333,1370.6667)" />
<path <path
id="path254" id="path254"
d="M 0,0 C 0,205.098 -166.265,371.361 -371.362,371.361" d="M 0,0 C 0,126.805 -102.795,229.6 -229.6,229.6"
style="fill:none;stroke:#000000;stroke-width:137.482;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" style="fill:none;stroke:#000000;stroke-width:100.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,10900)" transform="matrix(1.3333333,0,0,-1.3333333,1838.3405,9350)"
clip-path="url(#clipPath255)" /> clip-path="url(#clipPath255)" />
<path <path
id="path256" id="path256"
d="M 0,0 177.512,-211.551" 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" 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,2395)" /> transform="matrix(1.3333333,0,0,-1.3333333,219.88347,2300)" />
<path <path
id="path257" id="path257"
d="M 0,0 C -205.098,0 -371.361,-166.265 -371.361,-371.362" d="M 0,0 C -205.098,0 -371.361,-166.265 -371.361,-371.362"
@ -44,21 +78,22 @@
id="path300" id="path300"
d="M 0,0 C 0,-126.805 102.795,-229.6 229.6,-229.6" 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" 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)" transform="matrix(1.3333333,0,0,-1.3333333,1968.6667,3650
)"
clip-path="url(#clipPath301)" /> clip-path="url(#clipPath301)" />
<path <path
id="path302" id="path302"
d="M 0,0 C 0,126.805 -102.795,229.6 -229.6,229.6" 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" 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)" transform="matrix(1.3333333,0,0,-1.3333333,2165.1349,5600)"
clip-path="url(#clipPath303)" /> clip-path="url(#clipPath303)" />
<path <path
id="path311" id="path311"
d="M 0,0 V 283" 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" 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)" /> transform="matrix(1.3333333,0,0,-1.3333333,247.22107,5400)" />
<rect <rect
style="fill:none;stroke:#000000;stroke-width:0.872103;paint-order:fill markers stroke" style="fill:none;stroke:none;stroke-width:0.872103;paint-order:fill markers stroke"
id="rect717" id="rect717"
width="2559.4043" width="2559.4043"
height="11996.388" height="11996.388"

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.2 KiB

After

Width:  |  Height:  |  Size: 4.0 KiB

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

@ -1,11 +1,8 @@
// document.addEventListener("DOMContentLoaded", function() { document.addEventListener('scroll', function() {
// const pathToRotate = document.getElementById('path257'); const scrolled = window.pageYOffset;
// let rotationAngle = 0; const background = document.getElementById('background-animated');
// // function rotatePath() { // Adjust this value to control the speed of the parallax effect
// // rotationAngle += 1; // Augmente l'angle de rotation const parallaxSpeed = 0.2;
// // pathToRotate.setAttribute('transform', `translate(1460.9323, 1201.6543) rotate(${rotationAngle}, 5, -10)`); // Applique la transformation de rotation background.style.transform = 'translateY(' + (scrolled * parallaxSpeed) + 'px)';
// // } });
// // setInterval(rotatePath, 10); // Appelle la fonction rotatePath toutes les 10 millisecondes (ajustez selon vos besoins)
// });

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

@ -3,19 +3,19 @@
.config_pages--type--diaporama-home{ .config_pages--type--diaporama-home{
position: relative; position: relative;
#svg1{ // #svg1{
position: absolute; // position: absolute;
z-index: 5; // z-index: 5;
right: 11rem; // right: 11rem;
bottom: -8rem; // bottom: -16rem;
width: 50%; // width: 50%;
@media(max-width: 810px){ // @media(max-width: 810px){
display: none; // display:none;
// bottom: -4rem; // // bottom: -4rem;
// right: 4rem; // // right: 4rem;
// width: 72%; // // width: 72%;
} // }
} // }
.field_field_images{ .field_field_images{
img{ img{
width: 100%; width: 100%;
@ -48,17 +48,17 @@
flex-direction: row; flex-direction: row;
flex-wrap: wrap ; flex-wrap: wrap ;
position: relative; position: relative;
&::after{ // &::after{
content: url('../img/formes-animees-2.svg'); // content: url('../img/formes-animees-2.svg');
display: block; // display: block;
position: absolute; // position: absolute;
z-index: 5; // z-index: 5;
left: 1rem; // left: 1rem;
bottom: 0; // bottom: 0;
@media(max-width: 810px){ // @media(max-width: 810px){
display: none; // display: none;
} // }
} // }
@media(max-width: 1090px){ @media(max-width: 1090px){
flex-direction: column; flex-direction: column;
} }
@ -103,17 +103,17 @@
background-color: #edefe8; background-color: #edefe8;
position: relative; position: relative;
padding-bottom: 6rem; padding-bottom: 6rem;
&::after{ // &::after{
content: url('../img/formes-animees-3.svg'); // content: url('../img/formes-animees-3.svg');
display: block; // display: block;
position: absolute; // position: absolute;
z-index: 5; // z-index: 5;
right: 15%; // right: 15%;
bottom: 45%; // bottom: 45%;
@media(max-width: 810px){ // @media(max-width: 810px){
display: none; // display: none;
} // }
} // }
.field_field_title{ .field_field_title{
font-family: 'gilroy-bold'; font-family: 'gilroy-bold';
} }
@ -323,29 +323,29 @@
align-items: center; align-items: center;
padding-bottom: 2rem; padding-bottom: 2rem;
position: relative; position: relative;
&::before{ // &::before{
content: url('../img/formes-animees-4.svg'); // content: url('../img/formes-animees-4.svg');
display: block; // display: block;
position: absolute; // position: absolute;
z-index: 5; // z-index: 5;
left: 10%; // left: 10%;
top: -6rem; // top: -6rem;
@media(max-width: 810px){ // @media(max-width: 810px){
display: none; // display: none;
} // }
} // }
&::after{ // &::after{
content: url('../img/formes-animees-5.svg'); // content: url('../img/formes-animees-5.svg');
display: block; // display: block;
position: absolute; // position: absolute;
z-index: 5; // z-index: 5;
right: 15%; // right: 15%;
top: 3rem; // top: 3rem;
@media(max-width: 810px){ // @media(max-width: 810px){
display: none; // display: none;
} // }
} // }
@media(max-width: 500px){ @media(max-width: 500px){
width: 90%; width: 90%;
text-align: center; text-align: center;

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

@ -1,29 +1,29 @@
// #home{ #home{
// #background-animated { #background-animated {
// position: absolute; position: absolute;
// top: 0; top: 600px;
// left: 0; left: 0;
// width: 100%; width: 100%;
// height: 100%; height: 100%;
// pointer-events: none; /* Permet de cliquer à travers l'élément */ pointer-events: none; /* Permet de cliquer à travers l'élément */
// z-index: 5; /* S'assure que l'élément soit au-dessus */ z-index: 5; /* S'assure que l'élément soit au-dessus */
// @media(max-width: 810px){ @media(max-width: 810px){
// top: 1820px; top: 1820px;
// } }
// svg{ svg{
// max-width: 100%; max-width: 100%;
// position: relative; position: relative;
// top: -1500px; top: -1500px;
// } }
// } }
// .layout-content { .layout-content {
// position: relative; position: relative;
// z-index: 2; /* S'assure que le contenu soit au-dessus des animations */ z-index: 2; /* S'assure que le contenu soit au-dessus des animations */
// } }
// .layout-container.home { .layout-container.home {
// position: relative; position: relative;
// } }
// } }

44
web/themes/custom/quartiers_de_demain/src/assets/scss/partials/timeline.scss
View File

@ -14,28 +14,28 @@
cursor:grab; cursor:grab;
} }
position: relative; position: relative;
&::before{ // &::before{
content: url('../img/formes-animees-6.svg'); // content: url('../img/formes-animees-6.svg');
display: block; // display: block;
position: absolute; // position: absolute;
z-index: 5; // z-index: 5;
right: 20%; // right: 20%;
top: 2rem; // top: 2rem;
@media(max-width: 810px){ // @media(max-width: 810px){
display: none; // display: none;
} // }
} // }
&::after{ // &::after{
content: url('../img/formes-animees-7.svg'); // content: url('../img/formes-animees-7.svg');
display: block; // display: block;
position: absolute; // position: absolute;
z-index: 5; // z-index: 5;
right: 26%; // right: 26%;
bottom: -9rem; // bottom: -9rem;
@media(max-width: 810px){ // @media(max-width: 810px){
display: none; // display: none;
} // }
} // }
h2{ h2{
width: fit-content; width: fit-content;
margin: auto; margin: auto;

2
web/themes/custom/quartiers_de_demain/templates/config-pages--diaporama-home.html.twig
View File

@ -18,5 +18,5 @@ set classes = [
%} %}
<div{{ attributes.addClass(classes) }}> <div{{ attributes.addClass(classes) }}>
{{ content }} {{ content }}
{% include active_theme_path() ~ '/dist/assets/img/formes-animees-1.svg' %} {# {% include active_theme_path() ~ '/dist/assets/img/formes-animees-1.svg' %} #}
</div> </div>

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

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