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 { #home #background-animated {
display: none;
position: absolute; position: absolute;
top: -150px; top: -150px;
left: 0; left: 0;
@ -1556,32 +1557,32 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
#home .visible svg #pillier-1-path365 { #home .visible svg #pillier-1-path365 {
stroke-dasharray: 1000; /* Longueur totale du chemin */ stroke-dasharray: 1000; /* Longueur totale du chemin */
stroke-dashoffset: 1000; /* Décalage initial pour cacher le 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) { #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) { #home .visible h5:nth-of-type(2) {
animation: Appear 1s 2s forwards; animation: Appear 1s 1.2s forwards;
} }
#home .visible svg #pillier-2-path367 { #home .visible svg #pillier-2-path367 {
stroke-dasharray: 1000; /* Longueur totale du chemin */ stroke-dasharray: 1000; /* Longueur totale du chemin */
stroke-dashoffset: 1000; /* Décalage initial pour cacher le 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) { #home .visible p:nth-of-type(2) {
animation: Appear 1s 3s forwards; animation: Appear 1s 2s forwards;
} }
#home .visible h5:nth-of-type(3) { #home .visible h5:nth-of-type(3) {
animation: Appear 1s 4s forwards; animation: Appear 1s 2.2s forwards;
} }
#home .visible svg #pillier-3-path369 { #home .visible svg #pillier-3-path369 {
stroke-dasharray: 1000; /* Longueur totale du chemin */ stroke-dasharray: 1000; /* Longueur totale du chemin */
stroke-dashoffset: 1000; /* Décalage initial pour cacher le 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) { #home .visible p:nth-of-type(3) {
animation: Appear 1s 5s forwards; animation: Appear 1s 3s forwards;
} }
@keyframes Appear { @keyframes Appear {
0% { 0% {
@ -1616,7 +1617,7 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
padding-bottom: 2rem; padding-bottom: 2rem;
} }
#home article.node-type-static { #home article.node-type-static {
padding-top: 6rem; padding-top: 3rem;
} }
@media (max-width: 810px) { @media (max-width: 810px) {
#home article.node-type-static { #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 { #home .paragraph--type--static-parts:not(#paragraph-id--7) #svg1 {
display: none; display: none;
} }
#home #actus-caroussel {
display: none;
}
#consultation { #consultation {
background-color: #f6f7f3; background-color: #f6f7f3;

View File

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

View File

@ -17,36 +17,36 @@
svg #pillier-1-path365 { svg #pillier-1-path365 {
stroke-dasharray: 1000; /* Longueur totale du chemin */ stroke-dasharray: 1000; /* Longueur totale du chemin */
stroke-dashoffset: 1000; /* Décalage initial pour cacher le 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) { p:nth-of-type(1) {
animation: Appear 1s 1s forwards; animation: Appear 1s 0.5s forwards;
} }
h5:nth-of-type(2) { h5:nth-of-type(2) {
animation: Appear 1s 2s forwards; animation: Appear 1s 1.2s forwards;
} }
svg #pillier-2-path367 { svg #pillier-2-path367 {
stroke-dasharray: 1000; /* Longueur totale du chemin */ stroke-dasharray: 1000; /* Longueur totale du chemin */
stroke-dashoffset: 1000; /* Décalage initial pour cacher le 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) { p:nth-of-type(2) {
animation: Appear 1s 3s forwards; animation: Appear 1s 2s forwards;
} }
h5:nth-of-type(3) { h5:nth-of-type(3) {
animation: Appear 1s 4s forwards; animation: Appear 1s 2.2s forwards;
} }
svg #pillier-3-path369 { svg #pillier-3-path369 {
stroke-dasharray: 1000; /* Longueur totale du chemin */ stroke-dasharray: 1000; /* Longueur totale du chemin */
stroke-dashoffset: 1000; /* Décalage initial pour cacher le 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) { p:nth-of-type(3) {
animation: Appear 1s 5s forwards; animation: Appear 1s 3s forwards;
} }
@keyframes Appear { @keyframes Appear {

View File

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