top background

This commit is contained in:
ouidade 2024-07-19 14:02:54 +02:00
parent 6e0dc17a46
commit e5617ee03f
4 changed files with 26 additions and 18 deletions

View File

@ -1518,6 +1518,7 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
}
#home #background-animated {
display: none;
position: absolute;
top: -150px;
left: 0;
@ -1556,32 +1557,32 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
#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 0.2s forwards, fillAnimation 2s 0.2s ease-in-out forwards; /* Animation de remplissage sur 2 secondes */
animation: Appear 1s 0s forwards, fillAnimation 2s 0s ease-in-out forwards; /* Animation de remplissage sur 2 secondes */
}
#home .visible p:nth-of-type(1) {
animation: Appear 1s 1s forwards;
animation: Appear 1s 0.5s forwards;
}
#home .visible h5:nth-of-type(2) {
animation: Appear 1s 2s forwards;
animation: Appear 1s 1.2s forwards;
}
#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 2.2s forwards, fillAnimation 2s 2.2s ease-in-out forwards; /* Animation de remplissage sur 2 secondes */
animation: Appear 1s 1.5s forwards, fillAnimation 2s 1.5s ease-in-out forwards; /* Animation de remplissage sur 2 secondes */
}
#home .visible p:nth-of-type(2) {
animation: Appear 1s 3s forwards;
animation: Appear 1s 2s forwards;
}
#home .visible h5:nth-of-type(3) {
animation: Appear 1s 4s forwards;
animation: Appear 1s 2.2s forwards;
}
#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 4.2s forwards, fillAnimation 2s 4.2s ease-in-out forwards; /* Animation de remplissage sur 2 secondes */
animation: Appear 1s 2.5s forwards, fillAnimation 2s 2.5s ease-in-out forwards; /* Animation de remplissage sur 2 secondes */
}
#home .visible p:nth-of-type(3) {
animation: Appear 1s 5s forwards;
animation: Appear 1s 3s forwards;
}
@keyframes Appear {
0% {
@ -1616,7 +1617,7 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
padding-bottom: 2rem;
}
#home article.node-type-static {
padding-top: 6rem;
padding-top: 3rem;
}
@media (max-width: 810px) {
#home article.node-type-static {
@ -2191,6 +2192,9 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
#home .paragraph--type--static-parts:not(#paragraph-id--7) #svg1 {
display: none;
}
#home #actus-caroussel {
display: none;
}
#consultation {
background-color: #f6f7f3;

View File

@ -20,7 +20,7 @@
padding-bottom: 2rem;
}
article.node-type-static{
padding-top: 6rem;
padding-top: 3rem;
@media(max-width: 810px){
padding-top: 2rem;
}
@ -563,6 +563,9 @@
display: none;
}
}
#actus-caroussel{
display: none;
}
}

View File

@ -17,36 +17,36 @@
svg #pillier-1-path365 {
stroke-dasharray: 1000; /* Longueur totale du chemin */
stroke-dashoffset: 1000; /* Décalage initial pour cacher le chemin */
animation: Appear 1s 0.2s forwards, fillAnimation 2s 0.2s ease-in-out forwards; /* Animation de remplissage sur 2 secondes */
animation: Appear 1s 0s forwards, fillAnimation 2s 0s ease-in-out forwards; /* Animation de remplissage sur 2 secondes */
}
p:nth-of-type(1) {
animation: Appear 1s 1s forwards;
animation: Appear 1s 0.5s forwards;
}
h5:nth-of-type(2) {
animation: Appear 1s 2s forwards;
animation: Appear 1s 1.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 2.2s forwards, fillAnimation 2s 2.2s ease-in-out forwards; /* Animation de remplissage sur 2 secondes */
animation: Appear 1s 1.5s forwards, fillAnimation 2s 1.5s ease-in-out forwards; /* Animation de remplissage sur 2 secondes */
}
p:nth-of-type(2) {
animation: Appear 1s 3s forwards;
animation: Appear 1s 2s forwards;
}
h5:nth-of-type(3) {
animation: Appear 1s 4s forwards;
animation: Appear 1s 2.2s 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 4.2s forwards, fillAnimation 2s 4.2s ease-in-out forwards; /* Animation de remplissage sur 2 secondes */
animation: Appear 1s 2.5s forwards, fillAnimation 2s 2.5s ease-in-out forwards; /* Animation de remplissage sur 2 secondes */
}
p:nth-of-type(3) {
animation: Appear 1s 5s forwards;
animation: Appear 1s 3s forwards;
}
@keyframes Appear {

View File

@ -1,6 +1,7 @@
#home{
#background-animated {
display: none;
position: absolute;
top: -150px;
left: 0;