pilliers animation
This commit is contained in:
parent
adca214c4b
commit
90075e0826
File diff suppressed because one or more lines are too long
|
@ -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) {
|
||||
|
|
|
@ -29,6 +29,7 @@ document.addEventListener('scroll', function() {
|
|||
// // Observer l'élément SVG
|
||||
// observer.observe(svg);
|
||||
|
||||
//////////////////////////////////////////////////
|
||||
|
||||
//ANimation Pilliers
|
||||
const svg = document.querySelector('#paragraph-id--7 .colone-picto');
|
||||
|
@ -41,12 +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');
|
||||
// svg.classList.add('invisible');
|
||||
else {
|
||||
// Optionnel : Retirez la classe si nécessaire
|
||||
svg.classList.remove('visible');
|
||||
|
||||
// }
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
|
|
|
@ -347,6 +347,8 @@
|
|||
if (monthText === "juillet") {
|
||||
monthField.textContent = monthText.slice(0, 4);
|
||||
monthField.classList.add('after');
|
||||
} else if (monthText === "juin") {
|
||||
monthField.textContent = monthText.slice(0, 4);
|
||||
} else if (monthText.length > 3) {
|
||||
monthField.textContent = monthText.slice(0, 3);
|
||||
monthField.classList.add('after');
|
||||
|
|
|
@ -428,7 +428,7 @@
|
|||
grid-row: 2;
|
||||
grid-column: 3;
|
||||
position: relative;
|
||||
top: -70px;
|
||||
top: -50px;
|
||||
@media(max-width: 820px){
|
||||
grid-row: 4;
|
||||
grid-column: 2;
|
||||
|
|
|
@ -2,55 +2,53 @@
|
|||
|
||||
#home{
|
||||
/////////////////animation pilliers //////////////
|
||||
|
||||
#paragraph-id--7 .colone-picto h5,
|
||||
#paragraph-id--7 .colone-picto p,
|
||||
#paragraph-id--7 .colone-picto svg #pillier-1-path365,
|
||||
#paragraph-id--7 .colone-picto svg #pillier-2-path367,
|
||||
#paragraph-id--7 .colone-picto svg #pillier-3-path369{
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.visible{
|
||||
h5:nth-of-type(1) {
|
||||
animation-delay: 1s;
|
||||
animation-name: Appear;
|
||||
animation-duration: 1s;
|
||||
animation: Appear 1s 0.2s forwards;
|
||||
}
|
||||
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 */
|
||||
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 */
|
||||
}
|
||||
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;
|
||||
}
|
||||
|
||||
|
||||
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;
|
||||
|
||||
}
|
||||
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 */
|
||||
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 */
|
||||
}
|
||||
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;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
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 */
|
||||
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 */
|
||||
}
|
||||
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%{
|
||||
opacity: 0;
|
||||
|
@ -59,41 +57,42 @@
|
|||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
#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;
|
||||
// animation-direction: alternate; /* Animation en aller-retour */
|
||||
|
||||
|
||||
}
|
||||
#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;
|
||||
// animation-direction: alternate; /* Animation en aller-retour */
|
||||
|
||||
}
|
||||
#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;
|
||||
// animation-direction: alternate; /* Animation en aller-retour */
|
||||
|
||||
}
|
||||
|
||||
@keyframes fillAnimation {
|
||||
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 */
|
||||
@keyframes fillAnimation {
|
||||
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-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;
|
||||
// animation-direction: alternate; /* Animation en aller-retour */
|
||||
|
||||
|
||||
// }
|
||||
// #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;
|
||||
// // animation-direction: alternate; /* Animation en aller-retour */
|
||||
|
||||
// }
|
||||
// #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;
|
||||
// // animation-direction: alternate; /* Animation en aller-retour */
|
||||
|
||||
// }
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
|
@ -64,7 +64,7 @@
|
|||
transition: all 1s;
|
||||
.__paragraphs{
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
display: inline-flex;
|
||||
width: 500px;
|
||||
height: 1px;
|
||||
background: black;
|
||||
|
|
Loading…
Reference in New Issue