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() { /***/ (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; opacity: 0;
} }
#home .visible h5:nth-of-type(1) { #home .visible h5:nth-of-type(1) {
animation: Appear 1s 0.2s forwards; animation: Appear 1s 0s forwards;
} }
#home .visible svg #pillier-1-path365 { #home .visible svg #pillier-1-path365 {
stroke-dasharray: 1000; /* Longueur totale du chemin */ stroke-dasharray: 1000; /* Longueur totale du chemin */
stroke-dashoffset: 1000; /* Décalage initial pour cacher le 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) { #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) { #home .visible h5:nth-of-type(2) {
animation: Appear 1s 4s forwards; animation: Appear 1s 2s forwards;
} }
#home .visible svg #pillier-2-path367 { #home .visible svg #pillier-2-path367 {
stroke-dasharray: 1000; /* Longueur totale du chemin */ stroke-dasharray: 1000; /* Longueur totale du chemin */
stroke-dashoffset: 1000; /* Décalage initial pour cacher le 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) { #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) { #home .visible h5:nth-of-type(3) {
animation: Appear 1s 7s forwards; animation: Appear 1s 4s forwards;
} }
#home .visible svg #pillier-3-path369 { #home .visible svg #pillier-3-path369 {
stroke-dasharray: 1000; /* Longueur totale du chemin */ stroke-dasharray: 1000; /* Longueur totale du chemin */
stroke-dashoffset: 1000; /* Décalage initial pour cacher le 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) { #home .visible p:nth-of-type(3) {
animation: Appear 1.5s 9s forwards; animation: Appear 1s 5s forwards;
} }
@keyframes Appear { @keyframes Appear {
0% { 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) { #home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto p:nth-of-type(3) {
grid-row: 3; grid-row: 3;
grid-column: 5/span 6; grid-column: 5/span 6;
max-width: 406px;
} }
@media (max-width: 820px) { @media (max-width: 820px) {
#home article.node-type-static #paragraph-id--7 .field_field_texte .colone-picto p:nth-of-type(3) { #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.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');
} // }
}); });
}); });

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

@ -535,6 +535,7 @@
p:nth-of-type(3){ p:nth-of-type(3){
grid-row: 3; grid-row: 3;
grid-column: 5 /span 6; grid-column: 5 /span 6;
max-width: 406px;
@media(max-width: 820px){ @media(max-width: 820px){
grid-row: 9; grid-row: 9;
grid-column: 1 /span 2; 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{ .visible{
h5:nth-of-type(1) { h5:nth-of-type(1) {
animation: Appear 1s 0.2s forwards; animation: Appear 1s 0s forwards;
} }
svg #pillier-1-path365 { svg #pillier-1-path365 {
stroke-dasharray: 1000; /* Longueur totale du chemin */ stroke-dasharray: 1000; /* Longueur totale du chemin */
stroke-dashoffset: 1000; /* Décalage initial pour cacher le 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) { p:nth-of-type(1) {
animation: Appear 1.5s 3s forwards; animation: Appear 1s 1s forwards;
} }
h5:nth-of-type(2) { h5:nth-of-type(2) {
animation: Appear 1s 4s forwards; animation: Appear 1s 2s forwards;
} }
svg #pillier-2-path367 { svg #pillier-2-path367 {
stroke-dasharray: 1000; /* Longueur totale du chemin */ stroke-dasharray: 1000; /* Longueur totale du chemin */
stroke-dashoffset: 1000; /* Décalage initial pour cacher le 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) { p:nth-of-type(2) {
animation: Appear 1.5s 6s forwards; animation: Appear 1s 3s forwards;
} }
h5:nth-of-type(3) { h5:nth-of-type(3) {
animation: Appear 1s 7s forwards; animation: Appear 1s 4s forwards;
} }
svg #pillier-3-path369 { svg #pillier-3-path369 {
stroke-dasharray: 1000; /* Longueur totale du chemin */ stroke-dasharray: 1000; /* Longueur totale du chemin */
stroke-dashoffset: 1000; /* Décalage initial pour cacher le 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) { p:nth-of-type(3) {
animation: Appear 1.5s 9s forwards; animation: Appear 1s 5s forwards;
} }
@keyframes Appear { @keyframes Appear {