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

animation pilliers

Browse Source
This commit is contained in:
Ouidade Soussi Chiadmi
2024-07-12 16:39:03 +02:00
parent 7e6b6d7bce
commit 8a09d17df1
14 changed files with 172 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

21
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);

49
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){
@@ -579,4 +621,9 @@
}
}
}
}

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