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-18 10:33:12 +02:00
parent 90075e0826
commit 2c7bb085f8
5 changed files with 25 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/themes/custom/quartiers_de_demain/dist/assets/bundle.js vendored
View File

@ -26,7 +26,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony default export */
\******************************************/
/***/ (function() {
eval("document.addEventListener('scroll', function() {\n const scrolled = window.pageYOffset;\n const background = document.getElementById('background-animated');\n \n // Adjust this value to control the speed of the parallax effect\n const parallaxSpeed = 0.2;\n background.style.transform = 'translateY(' + (scrolled * parallaxSpeed) + 'px)';\n});\n\n\n\n\n //ANimation Pilliers \n// const svg = document.querySelector('#paragraph-id--7 .colone-picto');\n\n// // Configuration de l'observateur d'intersection\n// const observer = new IntersectionObserver(entries => {\n// entries.forEach(entry => {\n// if (entry.isIntersecting) {\n// // Ajoute une classe lorsque l'élément est visible\n// svg.classList.add('visible');\n// } else {\n// // Optionnel : Retirez la classe si nécessaire\n// svg.classList.remove('visible');\n// }\n// });\n// });\n\n// // Observer l'élément SVG\n// observer.observe(svg);\n\n//////////////////////////////////////////////////\n\n//ANimation Pilliers \nconst svg = document.querySelector('#paragraph-id--7 .colone-picto');\n\n// Configuration de l'observateur d'intersection\nconst observer = new IntersectionObserver(entries => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n // Ajoute une classe lorsque l'élément est visible\n // svg.classList.remove('invisible');\n svg.classList.add('visible');\n } \n else {\n // Optionnel : Retirez la classe si nécessaire\n svg.classList.remove('visible');\n\n }\n });\n});\n\n// Observer l'élément SVG\nobserver.observe(svg);\n\n\n//# sourceURL=webpack://quartiers_de_demain/./src/assets/js/animated_formes.js?");
eval("document.addEventListener('scroll', function() {\n const scrolled = window.pageYOffset;\n const background = document.getElementById('background-animated');\n \n // Adjust this value to control the speed of the parallax effect\n const parallaxSpeed = 0.2;\n background.style.transform = 'translateY(' + (scrolled * parallaxSpeed) + 'px)';\n});\n\n\n\n\n //ANimation Pilliers \n// const svg = document.querySelector('#paragraph-id--7 .colone-picto');\n\n// // Configuration de l'observateur d'intersection\n// const observer = new IntersectionObserver(entries => {\n// entries.forEach(entry => {\n// if (entry.isIntersecting) {\n// // Ajoute une classe lorsque l'élément est visible\n// svg.classList.add('visible');\n// } else {\n// // Optionnel : Retirez la classe si nécessaire\n// svg.classList.remove('visible');\n// }\n// });\n// });\n\n// // Observer l'élément SVG\n// observer.observe(svg);\n\n//////////////////////////////////////////////////\n\n//ANimation Pilliers \nconst svg = document.querySelector('#paragraph-id--7 .colone-picto');\n\n// Configuration de l'observateur d'intersection\nconst observer = new IntersectionObserver(entries => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n // Ajoute une classe lorsque l'élément est visible\n // svg.classList.remove('invisible');\n svg.classList.add('visible');\n } \n // else {\n // // Optionnel : Retirez la classe si nécessaire\n // svg.classList.remove('visible');\n\n // }\n });\n});\n\n// Observer l'élément SVG\nobserver.observe(svg);\n\n\n//# sourceURL=webpack://quartiers_de_demain/./src/assets/js/animated_formes.js?");
/***/ }),

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

@ -1511,37 +1511,37 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
opacity: 0;
}
#home .visible h5:nth-of-type(1) {
animation: Appear 1s 0.2s forwards;
animation: Appear 1s 0s 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 */
animation: Appear 1s 0.2s forwards, fillAnimation 2s 0.2s ease-in-out forwards; /* Animation de remplissage sur 2 secondes */
}
#home .visible p:nth-of-type(1) {
animation: Appear 1.5s 3s forwards;
animation: Appear 1s 1s forwards;
}
#home .visible h5:nth-of-type(2) {
animation: Appear 1s 4s forwards;
animation: Appear 1s 2s forwards;
}
#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 */
animation: Appear 1s 2.2s forwards, fillAnimation 2s 2.2s ease-in-out forwards; /* Animation de remplissage sur 2 secondes */
}
#home .visible p:nth-of-type(2) {
animation: Appear 1.5s 6s forwards;
animation: Appear 1s 3s forwards;
}
#home .visible h5:nth-of-type(3) {
animation: Appear 1s 7s forwards;
animation: Appear 1s 4s forwards;
}
#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 */
animation: Appear 1s 4.2s forwards, fillAnimation 2s 4.2s ease-in-out forwards; /* Animation de remplissage sur 2 secondes */
}
#home .visible p:nth-of-type(3) {
animation: Appear 1.5s 9s forwards;
animation: Appear 1s 5s forwards;
}
@keyframes Appear {
0% {
@ -2134,6 +2134,7 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
#home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto p:nth-of-type(3) {
grid-row: 3;
grid-column: 5/span 6;
max-width: 406px;
}
@media (max-width: 820px) {
#home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto p:nth-of-type(3) {

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

@ -42,11 +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');
// else {
// // Optionnel : Retirez la classe si nécessaire
// svg.classList.remove('visible');
}
// }
});
});

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

@ -535,6 +535,7 @@
p:nth-of-type(3){
grid-row: 3;
grid-column: 5 /span 6;
max-width: 406px;
@media(max-width: 820px){
grid-row: 9;
grid-column: 1 /span 2;

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

@ -12,41 +12,41 @@
.visible{
h5:nth-of-type(1) {
animation: Appear 1s 0.2s forwards;
animation: Appear 1s 0s forwards;
}
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 */
animation: Appear 1s 0.2s forwards, fillAnimation 2s 0.2s ease-in-out forwards; /* Animation de remplissage sur 2 secondes */
}
p:nth-of-type(1) {
animation: Appear 1.5s 3s forwards;
animation: Appear 1s 1s forwards;
}
h5:nth-of-type(2) {
animation: Appear 1s 4s forwards;
animation: Appear 1s 2s forwards;
}
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 */
animation: Appear 1s 2.2s forwards, fillAnimation 2s 2.2s ease-in-out forwards; /* Animation de remplissage sur 2 secondes */
}
p:nth-of-type(2) {
animation: Appear 1.5s 6s forwards;
animation: Appear 1s 3s forwards;
}
h5:nth-of-type(3) {
animation: Appear 1s 7s forwards;
animation: Appear 1s 4s forwards;
}
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 */
animation: Appear 1s 4.2s forwards, fillAnimation 2s 4.2s ease-in-out forwards; /* Animation de remplissage sur 2 secondes */
}
p:nth-of-type(3) {
animation: Appear 1.5s 9s forwards;
animation: Appear 1s 5s forwards;
}
@keyframes Appear {