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

pilliers animation

Browse Source
This commit is contained in:
Ouidade Soussi Chiadmi
2024-07-18 10:33:12 +02:00
parent 90075e0826
commit 2c7bb085f8
5 changed files with 25 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -42,11 +42,11 @@ const observer = new IntersectionObserver(entries => {
// svg.classList.remove('invisible');
svg.classList.add('visible');
}
else {
// Optionnel : Retirez la classe si nécessaire
svg.classList.remove('visible');
// else {
// // Optionnel : Retirez la classe si nécessaire
// svg.classList.remove('visible');
}
// }
});
});

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

@@ -535,6 +535,7 @@
p:nth-of-type(3){
grid-row: 3;
grid-column: 5 /span 6;
max-width: 406px;
@media(max-width: 820px){
grid-row: 9;
grid-column: 1 /span 2;

18
web/themes/custom/quartiers_de_demain/src/assets/scss/partials/animation-pilliers.scss
View File

@@ -12,41 +12,41 @@
.visible{
h5:nth-of-type(1) {
animation: Appear 1s 0.2s forwards;
animation: Appear 1s 0s forwards;
}
svg #pillier-1-path365 {
stroke-dasharray: 1000; /* Longueur totale du chemin */
stroke-dashoffset: 1000; /* Décalage initial pour cacher le chemin */
animation: Appear 1s 1.5s forwards, fillAnimation 3s 1.5s ease-in-out forwards; /* Animation de remplissage sur 2 secondes */
animation: Appear 1s 0.2s forwards, fillAnimation 2s 0.2s ease-in-out forwards; /* Animation de remplissage sur 2 secondes */
}
p:nth-of-type(1) {
animation: Appear 1.5s 3s forwards;
animation: Appear 1s 1s forwards;
}
h5:nth-of-type(2) {
animation: Appear 1s 4s forwards;
animation: Appear 1s 2s forwards;
}
svg #pillier-2-path367 {
stroke-dasharray: 1000; /* Longueur totale du chemin */
stroke-dashoffset: 1000; /* Décalage initial pour cacher le chemin */
animation: Appear 1s 5s forwards, fillAnimation 3s 5s ease-in-out forwards; /* Animation de remplissage sur 2 secondes */
animation: Appear 1s 2.2s forwards, fillAnimation 2s 2.2s ease-in-out forwards; /* Animation de remplissage sur 2 secondes */
}
p:nth-of-type(2) {
animation: Appear 1.5s 6s forwards;
animation: Appear 1s 3s forwards;
}
h5:nth-of-type(3) {
animation: Appear 1s 7s forwards;
animation: Appear 1s 4s forwards;
}
svg #pillier-3-path369 {
stroke-dasharray: 1000; /* Longueur totale du chemin */
stroke-dashoffset: 1000; /* Décalage initial pour cacher le chemin */
animation: Appear 1s 8s forwards, fillAnimation 3s 8s ease-in-out forwards; /* Animation de remplissage sur 2 secondes */
animation: Appear 1s 4.2s forwards, fillAnimation 2s 4.2s ease-in-out forwards; /* Animation de remplissage sur 2 secondes */
}
p:nth-of-type(3) {
animation: Appear 1.5s 9s forwards;
animation: Appear 1s 5s forwards;
}
@keyframes Appear {