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

animation pilliers

This commit is contained in:
ouidade 2024-07-12 16:39:03 +02:00
parent 7e6b6d7bce
commit 8a09d17df1
14 changed files with 172 additions and 80 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('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?");
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 // Sélectionnez l'élément SVG\nconst svg = document.querySelector('#paragraph-id--7 .pilliers-animes');\n\n// Configuration de l'observateur d'intersection\nconst 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('svg-visible');\n } else {\n // Optionnel : Retirez la classe si nécessaire\n svg.classList.remove('svg-visible');\n }\n });\n});\n\n// Observer l'élément SVG\nobserver.observe(svg);\n\n\n//# sourceURL=webpack://quartiers_de_demain/./src/assets/js/animated_formes.js?");
/***/ }),

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

@ -2081,6 +2081,40 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
position: relative;
}
}
#home article.node-type-static #paragraph-id--7 .colone-picto svg #pillier-1-path365 {
stroke-dasharray: 0; /* Longueur totale du chemin */
stroke-dashoffset: 1000; /* Décalage initial pour cacher le chemin */
animation: fillAnimation2 10s ease forwards; /* Animation de remplissage sur 2 secondes */
animation-delay: 5s;
}
#home article.node-type-static #paragraph-id--7 .colone-picto svg #pillier-2-path367 {
stroke-dasharray: 0; /* Longueur totale du chemin */
stroke-dashoffset: 1000; /* Décalage initial pour cacher le chemin */
animation: fillAnimation2 10s ease forwards; /* Animation de remplissage sur 2 secondes */
animation-delay: 10s;
}
#home article.node-type-static #paragraph-id--7 .colone-picto svg #pillier-3-path369 {
stroke-dasharray: 0; /* Longueur totale du chemin */
stroke-dashoffset: 1000; /* Décalage initial pour cacher le chemin */
animation: fillAnimation2 10s ease forwards; /* Animation de remplissage sur 2 secondes */
animation-delay: 15s;
}
@keyframes fillAnimation1 {
from {
stroke-dashoffset: 0; /* Début du chemin de décalage complet */
}
to {
stroke-dashoffset: 1000; /* Aucun décalage, le chemin est complètement visible */
}
}
@keyframes fillAnimation2 {
from {
stroke-dashoffset: 1000; /* Début du chemin de décalage complet */
}
to {
stroke-dashoffset: 0; /* Aucun décalage, le chemin est complètement visible */
}
}
#home .paragraph--type--static-parts:not(#paragraph-id--7) #svg1 {
display: none;
}

33
web/themes/custom/quartiers_de_demain/dist/assets/img/Youtube.svg vendored Normal file
View File

@ -0,0 +1,33 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
version="1.1"
id="svg1"
width="50.094727"
height="50.094727"
viewBox="0 0 50.094727 50.094726"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<defs
id="defs1">
<clipPath
clipPathUnits="userSpaceOnUse"
id="clipPath14">
<path
d="M 0,0 H 1920 V 9000 H 0 Z"
transform="translate(-1656.5101,-178.248)"
id="path14" />
</clipPath>
</defs>
<g
id="g1"
transform="translate(-2158.5854,-11737.288)">
<path
id="path13"
d="m 0,0 c 0,10.375 -8.411,18.786 -18.786,18.786 -10.374,0 -18.785,-8.411 -18.785,-18.786 0,-10.375 8.411,-18.785 18.785,-18.785 C -8.411,-18.785 0,-10.375 0,0 m -8.66,-2.644 c 0,-2.455 -1.989,-4.444 -4.444,-4.444 h -11.363 c -2.455,0 -4.444,1.989 -4.444,4.444 v 5.288 c 0,2.454 1.989,4.444 4.444,4.444 h 11.363 c 2.455,0 4.444,-1.99 4.444,-4.444 z m -6.683,2.248 c 0.207,0.112 -0.007,0.407 -0.212,0.524 l -4.878,2.654 c -0.199,0.114 -0.884,-0.031 -0.884,-0.261 v -5.175 c 0,-0.227 0.679,-0.371 0.879,-0.263 z"
style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
transform="matrix(1.3333333,0,0,-1.3333333,2208.6801,11762.336)"
clip-path="url(#clipPath14)" />
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

1
web/themes/custom/quartiers_de_demain/dist/assets/img/linkedin.svg vendored Normal file
View File

@ -0,0 +1 @@
<?xml version="1.0" ?><svg enable-background="new 0 0 32 32" version="1.1" viewBox="0 0 32 32" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g id="Flat_copy"><g><path d="M16,0C7.163,0,0,7.163,0,16c0,8.836,7.163,16,16,16s16-7.164,16-16C32,7.163,24.837,0,16,0z" fill="#333333"/></g><path d="M24.294,22.942v-6.137c0-3.288-1.755-4.818-4.096-4.818c-1.889,0-2.735,1.039-3.206,1.768v-1.517h-3.558 c0.047,1.005,0,10.704,0,10.704h3.558v-5.978c0-0.319,0.023-0.639,0.117-0.867c0.257-0.639,0.842-1.301,1.825-1.301 c1.288,0,1.803,0.981,1.803,2.42v5.727L24.294,22.942L24.294,22.942z M9.685,10.777c1.24,0,2.013-0.823,2.013-1.85 c-0.023-1.05-0.773-1.849-1.99-1.849S7.696,7.877,7.696,8.927c0,1.028,0.772,1.85,1.967,1.85H9.685z M11.464,22.942V12.238H7.907 v10.704H11.464z" fill="#FFFFFF"/></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 843 B

22
web/themes/custom/quartiers_de_demain/dist/assets/img/logo_x.svg vendored Normal file
View File

@ -0,0 +1,22 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
width="268.03613"
height="269.48193"
version="1.1"
id="svg1"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<defs
id="defs1" />
<ellipse
style="fill:#333333;fill-rule:evenodd;stroke:none;stroke-width:4.69421;stroke-linecap:round;stroke-linejoin:round;paint-order:stroke fill markers"
id="path2"
cx="134.01807"
cy="134.74095"
rx="134.01807"
ry="134.74095" />
<path
d="m 182.04042,59.990498 h 25.37653 l -55.71807,63.441352 65.09636,86.05957 H 165.71116 L 125.7155,157.19367 79.927403,209.49142 H 54.550874 L 113.57892,141.63674 51.240878,59.990498 h 52.352912 l 36.13399,47.774082 z m -8.88177,134.605972 h 14.06741 L 96.201523,74.33374 h -15.11563 z"
id="path1"
style="fill:#ffffff;stroke-width:0.551663" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 877 B

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

@ -24,9 +24,10 @@
id="g1"
transform="translate(-466.57886,-7752.7755)">
<path
id="path365"
class='pilliers-animes'
id="pillier-1-path365"
d="M 0,0 C 0,126.805 -102.795,229.6 -229.6,229.6"
style="fill:none;stroke:#ffffff;stroke-width:85;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
style="fill:none;stroke:#ffffff;stroke-width:85;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:1000;stroke-dashoffset:1000;stroke-opacity:1"
transform="matrix(1.3333333,0,0,-1.3333333,772.71213,8115.5755)"
clip-path="url(#clipPath366)" />
</g>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1007 B

After

Width:  |  Height:  |  Size: 1.0 KiB

5
web/themes/custom/quartiers_de_demain/dist/assets/img/pillier-2.svg vendored
View File

@ -24,9 +24,10 @@
id="g1"
transform="translate(-1070.391,-8142.9767)">
<path
id="path367"
class='pilliers-animes'
id="pillier-2-path367"
d="M 0,0 C 0,-126.805 102.795,-229.6 229.6,-229.6"
style="fill:none;stroke:#ffffff;stroke-width:85;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
style="fill:none;stroke:#ffffff;stroke-width:85;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:1000;stroke-dashoffset:1000;stroke-opacity:1"
transform="matrix(1.3333333,0,0,-1.3333333,1127.0576,8142.9765)"
clip-path="url(#clipPath368)" />
</g>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1005 B

After

Width:  |  Height:  |  Size: 1.0 KiB

5
web/themes/custom/quartiers_de_demain/dist/assets/img/pillier-3.svg vendored
View File

@ -24,9 +24,10 @@
id="g1"
transform="translate(-1617.5417,-7752.7755)">
<path
id="path369"
class='pilliers-animes'
id="pillier-3-path369"
d="M 0,0 C 126.805,0 229.6,102.795 229.6,229.6"
style="fill:none;stroke:#ffffff;stroke-width:85;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
style="fill:none;stroke:#ffffff;stroke-width:85;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:1000;stroke-dashoffset:1000;stroke-opacity:1"
transform="matrix(1.3333333,0,0,-1.3333333,1617.5417,8058.9088)"
clip-path="url(#clipPath370)" />
</g>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1005 B

After

Width:  |  Height:  |  Size: 1.0 KiB

2
web/themes/custom/quartiers_de_demain/src/assets/img/pillier-1.svg
View File

@ -26,7 +26,7 @@
<path
id="path365"
d="M 0,0 C 0,126.805 -102.795,229.6 -229.6,229.6"
style="fill:none;stroke:#ffffff;stroke-width:85;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
style="fill:none;stroke:#ffffff;stroke-width:85;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:1000;stroke-dashoffset:1000;stroke-opacity:1"
transform="matrix(1.3333333,0,0,-1.3333333,772.71213,8115.5755)"
clip-path="url(#clipPath366)" />
</g>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1007 B

After

Width:  |  Height:  |  Size: 1.0 KiB

2
web/themes/custom/quartiers_de_demain/src/assets/img/pillier-2.svg
View File

@ -26,7 +26,7 @@
<path
id="path367"
d="M 0,0 C 0,-126.805 102.795,-229.6 229.6,-229.6"
style="fill:none;stroke:#ffffff;stroke-width:85;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
style="fill:none;stroke:#ffffff;stroke-width:85;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:1000;stroke-dashoffset:1000;stroke-opacity:1"
transform="matrix(1.3333333,0,0,-1.3333333,1127.0576,8142.9765)"
clip-path="url(#clipPath368)" />
</g>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1005 B

After

Width:  |  Height:  |  Size: 1.0 KiB

2
web/themes/custom/quartiers_de_demain/src/assets/img/pillier-3.svg
View File

@ -26,7 +26,7 @@
<path
id="path369"
d="M 0,0 C 126.805,0 229.6,102.795 229.6,229.6"
style="fill:none;stroke:#ffffff;stroke-width:85;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
style="fill:none;stroke:#ffffff;stroke-width:85;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:1000;stroke-dashoffset:1000;stroke-opacity:1"
transform="matrix(1.3333333,0,0,-1.3333333,1617.5417,8058.9088)"
clip-path="url(#clipPath370)" />
</g>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1005 B

After

Width:  |  Height:  |  Size: 1.0 KiB

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

@ -5,4 +5,23 @@ document.addEventListener('scroll', function() {
// Adjust this value to control the speed of the parallax effect
const parallaxSpeed = 0.2;
background.style.transform = 'translateY(' + (scrolled * parallaxSpeed) + 'px)';
});
// Sélectionnez l'élément SVG
const svg = document.querySelector('#paragraph-id--7 .pilliers-animes');
// Configuration de l'observateur d'intersection
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => {
if (entry.isIntersecting) {
// Ajoute une classe lorsque l'élément est visible
svg.classList.add('svg-visible');
} else {
// Optionnel : Retirez la classe si nécessaire
svg.classList.remove('svg-visible');
}
});
});
// Observer l'élément SVG
observer.observe(svg);

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

@ -506,6 +506,7 @@
top: 50px;
position: relative;
}
}
svg:nth-of-type(2){
grid-row: 3;
@ -521,6 +522,8 @@
padding-left: 1rem;
}
}
svg:nth-of-type(3){
grid-row: 1 /span 2;
@ -538,6 +541,7 @@
padding-left: 1rem;
position: relative;
}
}
p:nth-of-type(1){
grid-row: 3;
@ -571,6 +575,44 @@
}
}
}
#paragraph-id--7 .colone-picto svg #pillier-1-path365{
stroke-dasharray: 0; /* Longueur totale du chemin */
stroke-dashoffset: 1000; /* Décalage initial pour cacher le chemin */
animation: fillAnimation2 10s ease forwards; /* Animation de remplissage sur 2 secondes */
animation-delay: 5s;
}
#paragraph-id--7 .colone-picto svg #pillier-2-path367{
stroke-dasharray: 0; /* Longueur totale du chemin */
stroke-dashoffset: 1000; /* Décalage initial pour cacher le chemin */
animation: fillAnimation2 10s ease forwards; /* Animation de remplissage sur 2 secondes */
animation-delay: 10s;
}
#paragraph-id--7 .colone-picto svg #pillier-3-path369{
stroke-dasharray: 0; /* Longueur totale du chemin */
stroke-dashoffset: 1000; /* Décalage initial pour cacher le chemin */
animation: fillAnimation2 10s ease forwards; /* Animation de remplissage sur 2 secondes */
animation-delay: 15s;
}
@keyframes fillAnimation1 {
from {
stroke-dashoffset: 0; /* Début du chemin de décalage complet */
}
to {
stroke-dashoffset: 1000; /* Aucun décalage, le chemin est complètement visible */
}
}
@keyframes fillAnimation2 {
from {
stroke-dashoffset: 1000; /* Début du chemin de décalage complet */
}
to {
stroke-dashoffset: 0; /* Aucun décalage, le chemin est complètement visible */
}
}
}
.paragraph--type--static-parts:not(#paragraph-id--7){
@ -580,3 +622,8 @@
}
}

69
web/themes/custom/quartiers_de_demain/src/assets/scss/partials/footer.scss
View File

@ -1,33 +1,5 @@
footer{
z-index: 100;
// span.totop {
// display: inline-flex;
// width: 100vw;
// #toTop{
// margin: auto;
// background-color: #fff;
// border-top-left-radius: 10%;
// border-top-right-radius: 10%;
// padding-bottom: 0.5rem;
// .arrow-up{
// font-size: 1.7rem;
// line-height: 2.5rem;
// text-align: center;
// width: 4rem;
// height: 2rem;
// display: inline-block;
// text-align: top;
// &::before{
// content:url("/themes/custom/quartiers_de_demain/src/assets/img/up-arrow.svg") ;
// // width: 20%;
// }
// }
// }
// }
}
.footer{
@ -73,55 +45,16 @@ footer{
height: fit-content;
margin: auto;
padding-left: 2rem;
// @media(max-width: 700px){
// height: $header-height-pad;
// }
// > div {
// width: 100%;
// height: 100%;
// > a {
// display: flex;
// align-items: center;
// justify-content: center;
// width: 100%;
// height: 100%;
// > img {
// padding: 0 2rem;
// width: 100%;
// height: auto;
// @media(max-width: 700px){
// padding: 0;
// }
// }
// }
// }
img{
width: auto;
height: 65px;
padding-left: 1rem;
// @media(max-width: 700px){
// height: $header-height-pad;
// }
// @media(max-width: 660px){
// height: $header-height-small;
// }
// @media(max-width: 450px){
// height: $header-height-ultrasmall;
// }
}
}
img{
width: auto;
height: 150px;
// @media(max-width: 700px){
// height: $header-height-pad;
// }
// @media(max-width: 660px){
// height: $header-height-small;
// }
// @media(max-width: 450px){
// height: $header-height-ultrasmall;
// }
}
}