bachir
/
drupal-quartiersdedemain
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

pilliers animation

This commit is contained in:
ouidade 2024-07-17 22:59:26 +02:00
parent adca214c4b
commit 90075e0826
7 changed files with 102 additions and 124 deletions
Show Stats 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 { #home .timeline .__timeline-content .__paragraphs {
position: relative; position: relative;
display: inline-block; display: inline-flex;
width: 500px; width: 500px;
height: 1px; height: 1px;
background: black; background: black;
@ -1503,50 +1503,45 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
position: relative; position: relative;
} }
#home .visible h5:nth-of-type(1) { #home #paragraph-id--7 .colone-picto h5,
animation-delay: 1s; #home #paragraph-id--7 .colone-picto p,
animation-name: Appear; #home #paragraph-id--7 .colone-picto svg #pillier-1-path365,
animation-duration: 1s; #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) { #home .visible h5:nth-of-type(1) {
animation-delay: 2s; /* Start after h5 (1s) + h5 duration (1s) */ animation: Appear 1s 0.2s forwards;
animation-name: Appear; }
animation-duration: 5s; /* Assuming svg animation is 5s */ #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) { #home .visible p:nth-of-type(1) {
animation-delay: 7s; /* Start after svg (2s) + svg duration (5s) */ animation: Appear 1.5s 3s forwards;
animation-name: Appear;
animation-duration: 1s;
} }
#home .visible h5:nth-of-type(2) { #home .visible h5:nth-of-type(2) {
animation-delay: 8s; /* Start after p (7s) + p duration (1s) */ animation: Appear 1s 4s forwards;
animation-name: Appear;
animation-duration: 1s;
} }
#home .visible svg:nth-of-type(2) { #home .visible svg #pillier-2-path367 {
animation-delay: 9s; /* Start after h5 (8s) + h5 duration (1s) */ stroke-dasharray: 1000; /* Longueur totale du chemin */
animation-name: Appear; stroke-dashoffset: 1000; /* Décalage initial pour cacher le chemin */
animation-duration: 5s; /* Assuming svg animation is 5s */ 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) { #home .visible p:nth-of-type(2) {
animation-delay: 14s; /* Start after svg (9s) + svg duration (5s) */ animation: Appear 1.5s 6s forwards;
animation-name: Appear;
animation-duration: 1s;
} }
#home .visible h5:nth-of-type(3) { #home .visible h5:nth-of-type(3) {
animation-delay: 15s; /* Start after p (14s) + p duration (1s) */ animation: Appear 1s 7s forwards;
animation-name: Appear;
animation-duration: 1s;
} }
#home .visible svg:nth-of-type(3) { #home .visible svg #pillier-3-path369 {
animation-delay: 16s; /* Start after h5 (15s) + h5 duration (1s) */ stroke-dasharray: 1000; /* Longueur totale du chemin */
animation-name: Appear; stroke-dashoffset: 1000; /* Décalage initial pour cacher le chemin */
animation-duration: 5s; /* Assuming svg animation is 5s */ 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) { #home .visible p:nth-of-type(3) {
animation-delay: 21s; /* Start after svg (16s) + svg duration (5s) */ animation: Appear 1.5s 9s forwards;
animation-name: Appear;
animation-duration: 1s;
} }
@keyframes Appear { @keyframes Appear {
0% { 0% {
@ -1556,24 +1551,6 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
opacity: 1; 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 { @keyframes fillAnimation {
from { from {
stroke-dashoffset: 1000; /* Début du chemin de décalage complet */ 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-row: 2;
grid-column: 3; grid-column: 3;
position: relative; position: relative;
top: -70px; top: -50px;
} }
@media (max-width: 820px) { @media (max-width: 820px) {
#home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto h5:nth-of-type(2) { #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 l'élément SVG
// observer.observe(svg); // observer.observe(svg);
//////////////////////////////////////////////////
//ANimation Pilliers //ANimation Pilliers
const svg = document.querySelector('#paragraph-id--7 .colone-picto'); const svg = document.querySelector('#paragraph-id--7 .colone-picto');
@ -41,12 +42,11 @@ const observer = new IntersectionObserver(entries => {
// svg.classList.remove('invisible'); // svg.classList.remove('invisible');
svg.classList.add('visible'); svg.classList.add('visible');
} }
// else { else {
// // Optionnel : Retirez la classe si nécessaire // Optionnel : Retirez la classe si nécessaire
// svg.classList.remove('visible'); svg.classList.remove('visible');
// svg.classList.add('invisible');
// } }
}); });
}); });

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

@ -347,6 +347,8 @@
if (monthText === "juillet") { if (monthText === "juillet") {
monthField.textContent = monthText.slice(0, 4); monthField.textContent = monthText.slice(0, 4);
monthField.classList.add('after'); monthField.classList.add('after');
} else if (monthText === "juin") {
monthField.textContent = monthText.slice(0, 4);
} else if (monthText.length > 3) { } else if (monthText.length > 3) {
monthField.textContent = monthText.slice(0, 3); monthField.textContent = monthText.slice(0, 3);
monthField.classList.add('after'); 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-row: 2;
grid-column: 3; grid-column: 3;
position: relative; position: relative;
top: -70px; top: -50px;
@media(max-width: 820px){ @media(max-width: 820px){
grid-row: 4; grid-row: 4;
grid-column: 2; grid-column: 2;

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

@ -2,55 +2,53 @@
#home{ #home{
/////////////////animation pilliers ////////////// /////////////////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{ .visible{
h5:nth-of-type(1) { h5:nth-of-type(1) {
animation-delay: 1s; animation: Appear 1s 0.2s forwards;
animation-name: Appear;
animation-duration: 1s;
} }
svg:nth-of-type(1) { svg #pillier-1-path365 {
animation-delay: 2s; /* Start after h5 (1s) + h5 duration (1s) */ stroke-dasharray: 1000; /* Longueur totale du chemin */
animation-name: Appear; stroke-dashoffset: 1000; /* Décalage initial pour cacher le chemin */
animation-duration: 5s; /* Assuming svg animation is 5s */ 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) { p:nth-of-type(1) {
animation-delay: 7s; /* Start after svg (2s) + svg duration (5s) */ animation: Appear 1.5s 3s forwards;
animation-name: Appear;
animation-duration: 1s;
} }
h5:nth-of-type(2) { h5:nth-of-type(2) {
animation-delay: 8s; /* Start after p (7s) + p duration (1s) */ animation: Appear 1s 4s forwards;
animation-name: Appear;
animation-duration: 1s;
} }
svg:nth-of-type(2) { svg #pillier-2-path367 {
animation-delay: 9s; /* Start after h5 (8s) + h5 duration (1s) */ stroke-dasharray: 1000; /* Longueur totale du chemin */
animation-name: Appear; stroke-dashoffset: 1000; /* Décalage initial pour cacher le chemin */
animation-duration: 5s; /* Assuming svg animation is 5s */ animation: Appear 1s 5s forwards, fillAnimation 3s 5s ease-in-out forwards; /* Animation de remplissage sur 2 secondes */
} }
p:nth-of-type(2) { p:nth-of-type(2) {
animation-delay: 14s; /* Start after svg (9s) + svg duration (5s) */ animation: Appear 1.5s 6s forwards;
animation-name: Appear;
animation-duration: 1s;
} }
h5:nth-of-type(3) { h5:nth-of-type(3) {
animation-delay: 15s; /* Start after p (14s) + p duration (1s) */ animation: Appear 1s 7s forwards;
animation-name: Appear;
animation-duration: 1s;
} }
svg:nth-of-type(3) { svg #pillier-3-path369 {
animation-delay: 16s; /* Start after h5 (15s) + h5 duration (1s) */ stroke-dasharray: 1000; /* Longueur totale du chemin */
animation-name: Appear; stroke-dashoffset: 1000; /* Décalage initial pour cacher le chemin */
animation-duration: 5s; /* Assuming svg animation is 5s */ animation: Appear 1s 8s forwards, fillAnimation 3s 8s ease-in-out forwards; /* Animation de remplissage sur 2 secondes */
} }
p:nth-of-type(3) { p:nth-of-type(3) {
animation-delay: 21s; /* Start after svg (16s) + svg duration (5s) */ animation: Appear 1.5s 9s forwards;
animation-name: Appear;
animation-duration: 1s;
} }
@keyframes Appear { @keyframes Appear {
0%{ 0%{
opacity: 0; opacity: 0;
@ -59,41 +57,42 @@
opacity: 1; opacity: 1;
} }
} }
} @keyframes fillAnimation {
#paragraph-id--7 .colone-picto svg #pillier-1-path365{ from {
stroke-dasharray: 1000; /* Longueur totale du chemin */ stroke-dashoffset: 1000; /* Début du chemin de décalage complet */
stroke-dashoffset: 1000; /* Décalage initial pour cacher le chemin */ }
animation: fillAnimation 5s ease-in-out forwards; /* Animation de remplissage sur 2 secondes */ to {
animation-delay: 5s; stroke-dashoffset: 0; /* Aucun décalage, le chemin est complètement visible */
// 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 */
} }
} }
// #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; transition: all 1s;
.__paragraphs{ .__paragraphs{
position: relative; position: relative;
display: inline-block; display: inline-flex;
width: 500px; width: 500px;
height: 1px; height: 1px;
background: black; background: black;