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-17 22:59:26 +02:00
parent adca214c4b
commit 90075e0826
7 changed files with 102 additions and 124 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
web/themes/custom/quartiers_de_demain/dist/assets/bundle.js vendored
View File

File diff suppressed because one or more lines are too long

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

@ -1122,7 +1122,7 @@ footer {
}
#home .timeline .__timeline-content .__paragraphs {
position: relative;
display: inline-block;
display: inline-flex;
width: 500px;
height: 1px;
background: black;
@ -1503,50 +1503,45 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
position: relative;
}
#home .visible h5:nth-of-type(1) {
animation-delay: 1s;
animation-name: Appear;
animation-duration: 1s;
#home #paragraph-id--7 .colone-picto h5,
#home #paragraph-id--7 .colone-picto p,
#home #paragraph-id--7 .colone-picto svg #pillier-1-path365,
#home #paragraph-id--7 .colone-picto svg #pillier-2-path367,
#home #paragraph-id--7 .colone-picto svg #pillier-3-path369 {
opacity: 0;
}
#home .visible svg:nth-of-type(1) {
animation-delay: 2s; /* Start after h5 (1s) + h5 duration (1s) */
animation-name: Appear;
animation-duration: 5s; /* Assuming svg animation is 5s */
#home .visible h5:nth-of-type(1) {
animation: Appear 1s 0.2s forwards;
}
#home .visible 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 */
}
#home .visible p:nth-of-type(1) {
animation-delay: 7s; /* Start after svg (2s) + svg duration (5s) */
animation-name: Appear;
animation-duration: 1s;
animation: Appear 1.5s 3s forwards;
}
#home .visible h5:nth-of-type(2) {
animation-delay: 8s; /* Start after p (7s) + p duration (1s) */
animation-name: Appear;
animation-duration: 1s;
animation: Appear 1s 4s forwards;
}
#home .visible svg:nth-of-type(2) {
animation-delay: 9s; /* Start after h5 (8s) + h5 duration (1s) */
animation-name: Appear;
animation-duration: 5s; /* Assuming svg animation is 5s */
#home .visible 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 */
}
#home .visible p:nth-of-type(2) {
animation-delay: 14s; /* Start after svg (9s) + svg duration (5s) */
animation-name: Appear;
animation-duration: 1s;
animation: Appear 1.5s 6s forwards;
}
#home .visible h5:nth-of-type(3) {
animation-delay: 15s; /* Start after p (14s) + p duration (1s) */
animation-name: Appear;
animation-duration: 1s;
animation: Appear 1s 7s forwards;
}
#home .visible svg:nth-of-type(3) {
animation-delay: 16s; /* Start after h5 (15s) + h5 duration (1s) */
animation-name: Appear;
animation-duration: 5s; /* Assuming svg animation is 5s */
#home .visible 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 */
}
#home .visible p:nth-of-type(3) {
animation-delay: 21s; /* Start after svg (16s) + svg duration (5s) */
animation-name: Appear;
animation-duration: 1s;
animation: Appear 1.5s 9s forwards;
}
@keyframes Appear {
0% {
@ -1556,24 +1551,6 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
opacity: 1;
}
}
#home #paragraph-id--7 .colone-picto svg #pillier-1-path365 {
stroke-dasharray: 1000; /* Longueur totale du chemin */
stroke-dashoffset: 1000; /* Décalage initial pour cacher le chemin */
animation: fillAnimation 5s ease-in-out forwards; /* Animation de remplissage sur 2 secondes */
animation-delay: 5s;
}
#home #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: fillAnimation 5s ease-in-out forwards; /* Animation de remplissage sur 2 secondes */
animation-delay: 5s;
}
#home #paragraph-id--7 .colone-picto svg #pillier-3-path369 {
stroke-dasharray: 1000; /* Longueur totale du chemin */
stroke-dashoffset: 1000; /* Décalage initial pour cacher le chemin */
animation: fillAnimation 5s ease-in-out forwards; /* Animation de remplissage sur 2 secondes */
animation-delay: 5s;
}
@keyframes fillAnimation {
from {
stroke-dashoffset: 1000; /* Début du chemin de décalage complet */
@ -2031,7 +2008,7 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
grid-row: 2;
grid-column: 3;
position: relative;
top: -70px;
top: -50px;
}
@media (max-width: 820px) {
#home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto h5:nth-of-type(2) {