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) {

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

@@ -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');
// }
}
});
});

2
web/themes/custom/quartiers_de_demain/src/assets/js/quartiers_de_demain.js
View File

@@ -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');

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

@@ -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;

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

@@ -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 */
// }
}

2
web/themes/custom/quartiers_de_demain/src/assets/scss/partials/timeline.scss
View File

@@ -64,7 +64,7 @@
transition: all 1s;
.__paragraphs{
position: relative;
display: inline-block;
display: inline-flex;
width: 500px;
height: 1px;
background: black;