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

timeline month

This commit is contained in:
ouidade 2024-07-17 21:29:18 +02:00
parent 119451da1a
commit adca214c4b
9 changed files with 236 additions and 218 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

120
web/themes/custom/quartiers_de_demain/dist/assets/css/bundle.css vendored
View File

@ -1204,7 +1204,7 @@ footer {
font-size: 4rem; font-size: 4rem;
} }
} }
#home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .date .field_field_date_de_moi::after { #home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .date .field_field_date_de_moi .after::after {
content: "."; content: ".";
} }
#home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .date .annee { #home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .date .annee {
@ -1479,12 +1479,12 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
#home #background-animated { #home #background-animated {
position: absolute; position: absolute;
top: 1000px; top: -400px;
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
pointer-events: none; /* Permet de cliquer à travers l'élément */ pointer-events: none; /* Permet de cliquer à travers l'élément */
z-index: 5; /* S'assure que l'élément soit au-dessus */ z-index: 2; /* S'assure que l'élément soit au-dessus */
} }
@media (max-width: 1400px) { @media (max-width: 1400px) {
#home #background-animated { #home #background-animated {
@ -1494,16 +1494,95 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
#home #background-animated svg { #home #background-animated svg {
max-width: 100%; max-width: 100%;
position: relative; position: relative;
top: -1500px;
} }
#home .layout-content { #home .layout-content {
position: relative; position: relative;
z-index: 2; /* S'assure que le contenu soit au-dessus des animations */ z-index: 1; /* S'assure que le contenu soit au-dessus des animations */
} }
#home .layout-container.home { #home .layout-container.home {
position: relative; position: relative;
} }
#home .visible h5:nth-of-type(1) {
animation-delay: 1s;
animation-name: Appear;
animation-duration: 1s;
}
#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 p:nth-of-type(1) {
animation-delay: 7s; /* Start after svg (2s) + svg duration (5s) */
animation-name: Appear;
animation-duration: 1s;
}
#home .visible h5:nth-of-type(2) {
animation-delay: 8s; /* Start after p (7s) + p duration (1s) */
animation-name: Appear;
animation-duration: 1s;
}
#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 p:nth-of-type(2) {
animation-delay: 14s; /* Start after svg (9s) + svg duration (5s) */
animation-name: Appear;
animation-duration: 1s;
}
#home .visible h5:nth-of-type(3) {
animation-delay: 15s; /* Start after p (14s) + p duration (1s) */
animation-name: Appear;
animation-duration: 1s;
}
#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 p:nth-of-type(3) {
animation-delay: 21s; /* Start after svg (16s) + svg duration (5s) */
animation-name: Appear;
animation-duration: 1s;
}
@keyframes Appear {
0% {
opacity: 0;
}
100% {
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 */
}
to {
stroke-dashoffset: 0; /* Aucun décalage, le chemin est complètement visible */
}
}
/*pages*/ /*pages*/
#home .config_pages--type--diaporama-home { #home .config_pages--type--diaporama-home {
position: relative; position: relative;
@ -1547,6 +1626,7 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
#home article.node-type-static .field_body > p:nth-child(1) { #home article.node-type-static .field_body > p:nth-child(1) {
margin-bottom: 0; margin-bottom: 0;
flex: 1 100%; flex: 1 100%;
z-index: 6;
font-size: 1.5rem; font-size: 1.5rem;
} }
@media (max-width: 1090px) { @media (max-width: 1090px) {
@ -2087,36 +2167,6 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
position: relative; position: relative;
} }
} }
#home article.node-type-static #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 8s ease-in-out infinite; /* Animation de remplissage sur 2 secondes */
animation-delay: 5s;
animation-direction: alternate; /* Animation en aller-retour */
}
#home article.node-type-static #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 8s ease-in-out infinite; /* Animation de remplissage sur 2 secondes */
animation-delay: 10s;
animation-direction: alternate; /* Animation en aller-retour */
}
#home article.node-type-static #paragraph-id--7 .colone-picto svg #pillier-3-path369 {
stroke-dasharray: 0; /* Longueur totale du chemin */
stroke-dashoffset: 1000; /* Décalage initial pour cacher le chemin */
animation: fillAnimation 8s ease-in-out; /* Animation de remplissage sur 2 secondes */
animation-delay: 15s;
animation-direction: alternate; /* Animation en aller-retour */
animation-iteration-count: infinite; /* Animation infinie */
}
@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 */
}
}
#home .paragraph--type--static-parts:not(#paragraph-id--7) #svg1 { #home .paragraph--type--static-parts:not(#paragraph-id--7) #svg1 {
display: none; display: none;
} }

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

@ -11,18 +11,42 @@ document.addEventListener('scroll', function() {
//ANimation Pilliers //ANimation Pilliers
const svg = document.querySelector('#paragraph-id--7 .pilliers-animes'); // const svg = document.querySelector('#paragraph-id--7 .colone-picto');
// // Configuration de l'observateur d'intersection
// const observer = new IntersectionObserver(entries => {
// entries.forEach(entry => {
// if (entry.isIntersecting) {
// // Ajoute une classe lorsque l'élément est visible
// svg.classList.add('visible');
// } else {
// // Optionnel : Retirez la classe si nécessaire
// svg.classList.remove('visible');
// }
// });
// });
// // Observer l'élément SVG
// observer.observe(svg);
//ANimation Pilliers
const svg = document.querySelector('#paragraph-id--7 .colone-picto');
// Configuration de l'observateur d'intersection // Configuration de l'observateur d'intersection
const observer = new IntersectionObserver(entries => { const observer = new IntersectionObserver(entries => {
entries.forEach(entry => { entries.forEach(entry => {
if (entry.isIntersecting) { if (entry.isIntersecting) {
// Ajoute une classe lorsque l'élément est visible // Ajoute une classe lorsque l'élément est visible
svg.classList.add('svg-visible'); // svg.classList.remove('invisible');
} else { svg.classList.add('visible');
// Optionnel : Retirez la classe si nécessaire
svg.classList.remove('svg-visible');
} }
// else {
// // Optionnel : Retirez la classe si nécessaire
// svg.classList.remove('visible');
// svg.classList.add('invisible');
// }
}); });
}); });

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

@ -344,8 +344,12 @@
const monthField = paragraph.querySelector('.field_field_date_de_moi div:nth-of-type(2)'); const monthField = paragraph.querySelector('.field_field_date_de_moi div:nth-of-type(2)');
if (monthField) { if (monthField) {
const monthText = monthField.textContent.trim(); const monthText = monthField.textContent.trim();
if (monthText.length >= 3) { if (monthText === "juillet") {
monthField.textContent = monthText.slice(0, 4);
monthField.classList.add('after');
} else if (monthText.length > 3) {
monthField.textContent = monthText.slice(0, 3); monthField.textContent = monthText.slice(0, 3);
monthField.classList.add('after');
} }
} }
}); });

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

@ -42,6 +42,7 @@
> p:nth-child(1){ > p:nth-child(1){
margin-bottom: 0; margin-bottom: 0;
flex: 1 100%; flex: 1 100%;
z-index: 6;
font-size: 1.5rem; font-size: 1.5rem;
@media(max-width: 1090px){ @media(max-width: 1090px){
font-size: 1.3rem; font-size: 1.3rem;
@ -312,138 +313,6 @@
} }
} }
} }
// #paragraph-id--21,
// #paragraph-id--28{ ///// Les enjeux 2
// &.paragraph--type--static-parts{padding-top: 0 !important;}
// background-color: #edefe8;
// position: relative;
// padding-bottom: 6rem;
// .field_field_title{
// font-family: 'gilroy-bold';
// }
// .field_field_picto{
// display: none;
// }
// .field_field_texte{
// width: 65%;
// margin: auto;
// @media(max-width: 1090px){
// width: 80%;
// }
// .colone-picto{
// display: flex;
// flex-direction: row;
// flex-wrap: wrap;
// justify-content: flex-start;
// padding-left: 6rem;
// @media(max-width: 1090px){
// padding-left: 1.5rem;
// }
// h3{
// flex: 0 80%;
// color: #0833c2ff;
// display: flex;
// flex-direction: column;
// font-size: 1rem;
// padding-top: 3rem;
// border-top: solid 1px #0833c2ff;
// }
// p{
// padding-right: 1rem;
// padding-bottom: 1rem;
// flex: 1 30%;
// max-width: 30%;
// display: flex;
// flex-direction: column;
// @media(max-width: 1090px){
// padding-right: 1rem;
// flex: 1 30%;
// max-width: 50%;
// font-size: 0.9rem;
// }
// /////////
// &:nth-of-type(1)::before{
// background-image: url("../img/ampoule.svg");
// background-size: 90px 100px;
// background-repeat: no-repeat;
// display: inline-block;
// width: 100px;
// height: 100px;
// content: "";
// padding-bottom: 1rem;
// @media(max-width: 810px){
// width: 50px;
// height: 50px;
// background-size: 50px 50px;
// }
// }
// &:nth-of-type(2)::before{
// background-image: url("../img/bonhome.svg");
// background-size: 90px 100px;
// background-repeat: no-repeat;
// display: inline-block;
// width: 100px;
// height: 100px;
// content: "";
// padding-bottom: 1rem;
// @media(max-width: 810px){
// width: 50px;
// height: 50px;
// background-size: 50px 50px;
// }
// }
// &:nth-of-type(3)::before{
// background-image: url("../img/feuilles.svg");
// background-size: 90px 100px;
// background-repeat: no-repeat;
// display: inline-block;
// width: 100px;
// height: 100px;
// content: "";
// padding-bottom: 1rem;
// @media(max-width: 810px){
// width: 50px;
// height: 50px;
// background-size: 50px 50px;
// }
// }
// &:nth-of-type(4)::before{
// background-image: url("../img/calendrier.svg");
// background-size: 90px 100px;
// background-repeat: no-repeat;
// display: inline-block;
// width: 100px;
// height: 100px;
// content: "";
// padding-bottom: 1rem;
// @media(max-width: 810px){
// width: 50px;
// height: 50px;
// background-size: 50px 50px;
// }
// }
// &:nth-of-type(5)::before{
// background-image: url("../img/crayons.svg");
// background-size: 60px 100px;
// background-repeat: no-repeat;
// display: inline-block;
// width: 100px;
// height: 100px;
// content: "";
// padding-bottom: 1rem;
// @media(max-width: 810px){
// width: 50px;
// height: 50px;
// background-size: 50px 50px;
// }
// }
// }
// }
// }
// }
#paragraph-id--6{ /////// quartier 2030 #paragraph-id--6{ /////// quartier 2030
@ -542,6 +411,7 @@
padding-left: 0; padding-left: 0;
} }
h5{ h5{
font-size: 5rem; font-size: 5rem;
font-weight: 800; font-weight: 800;
@ -681,42 +551,6 @@
} }
/////////////////animation pilliers //////////////
#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 8s ease-in-out infinite; /* 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 8s ease-in-out infinite; /* Animation de remplissage sur 2 secondes */
animation-delay: 10s;
animation-direction: alternate; /* Animation en aller-retour */
}
#paragraph-id--7 .colone-picto svg #pillier-3-path369{
stroke-dasharray: 0; /* Longueur totale du chemin */
stroke-dashoffset: 1000; /* Décalage initial pour cacher le chemin */
animation: fillAnimation 8s ease-in-out; /* Animation de remplissage sur 2 secondes */
animation-delay: 15s;
animation-direction: alternate; /* Animation en aller-retour */
animation-iteration-count: infinite; /* Animation infinie */
}
@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 */
}
}
} }

99
web/themes/custom/quartiers_de_demain/src/assets/scss/partials/animation-pilliers.scss Normal file
View File

@ -0,0 +1,99 @@
#home{
/////////////////animation pilliers //////////////
.visible{
h5:nth-of-type(1) {
animation-delay: 1s;
animation-name: Appear;
animation-duration: 1s;
}
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 */
}
p:nth-of-type(1) {
animation-delay: 7s; /* Start after svg (2s) + svg duration (5s) */
animation-name: Appear;
animation-duration: 1s;
}
h5:nth-of-type(2) {
animation-delay: 8s; /* Start after p (7s) + p duration (1s) */
animation-name: Appear;
animation-duration: 1s;
}
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 */
}
p:nth-of-type(2) {
animation-delay: 14s; /* Start after svg (9s) + svg duration (5s) */
animation-name: Appear;
animation-duration: 1s;
}
h5:nth-of-type(3) {
animation-delay: 15s; /* Start after p (14s) + p duration (1s) */
animation-name: Appear;
animation-duration: 1s;
}
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 */
}
p:nth-of-type(3) {
animation-delay: 21s; /* Start after svg (16s) + svg duration (5s) */
animation-name: Appear;
animation-duration: 1s;
}
@keyframes Appear {
0%{
opacity: 0;
}
100% {
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 */
}
}
}

8
web/themes/custom/quartiers_de_demain/src/assets/scss/partials/formes-animees.scss
View File

@ -2,19 +2,19 @@
#background-animated { #background-animated {
position: absolute; position: absolute;
top: 1000px; top: -400px;
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
pointer-events: none; /* Permet de cliquer à travers l'élément */ pointer-events: none; /* Permet de cliquer à travers l'élément */
z-index: 5; /* S'assure que l'élément soit au-dessus */ z-index: 2; /* S'assure que l'élément soit au-dessus */
@media(max-width: 1400px){ @media(max-width: 1400px){
display: none; display: none;
} }
svg{ svg{
max-width: 100%; max-width: 100%;
position: relative; position: relative;
top: -1500px; // top: -1500px;
} }
} }
// .not-visible{ // .not-visible{
@ -25,7 +25,7 @@
.layout-content { .layout-content {
position: relative; position: relative;
z-index: 2; /* S'assure que le contenu soit au-dessus des animations */ z-index: 1; /* S'assure que le contenu soit au-dessus des animations */
} }
.layout-container.home { .layout-container.home {

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

@ -138,10 +138,15 @@
@media(max-width:550px){ @media(max-width:550px){
font-size: 4rem; font-size: 4rem;
} }
.after{
&::after{ &::after{
content: '.'; content: '.';
} }
} }
}
.annee{ .annee{
display: flex; display: flex;
align-items: center; align-items: center;

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

@ -31,6 +31,8 @@
@import "partials/actu-caroussel-home"; @import "partials/actu-caroussel-home";
@import "partials/animation-logo-header"; @import "partials/animation-logo-header";
@import "partials/formes-animees"; @import "partials/formes-animees";
@import "partials/animation-pilliers";
// @import "partials/slick_custom"; // @import "partials/slick_custom";