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

formes géometriques

Browse Source
This commit is contained in:
Ouidade Soussi Chiadmi
2024-07-11 14:31:51 +02:00
parent ef68475b9a
commit d1d9778fc4
9 changed files with 213 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -20,13 +20,13 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
/***/ }),
/***/ "./src/assets/js/animated_logo.js":
/*!****************************************!*\
!*** ./src/assets/js/animated_logo.js ***!
\****************************************/
/***/ "./src/assets/js/animated_formes.js":
/*!******************************************!*\
!*** ./src/assets/js/animated_formes.js ***!
\******************************************/
/***/ (() => {
eval("\nfunction setLogoContainerSize() {\n let svgContainer = document.querySelector('#logo-animated');\n let svgElement = document.querySelector('#logo-animated svg');\n svgContainer.style.height = `${svgElement.clientHeight}px`;\n }\n setLogoContainerSize();\n window.addEventListener('resize', setLogoContainerSize);\n console.log('animated');\n\n let chemins = document.querySelectorAll('#logo-animated svg path');\n for (let chemin of chemins) {\n let length = chemin.getTotalLength();\n chemin.style.strokeDasharray = length;\n chemin.style.strokeDashoffset = length;\n }\n\n \n let consultationCouleur = document.querySelector('#consultation-couleur');\n let consultationNoir = document.querySelector('#consultation-noir');\n \n let quartierCouleur = document.querySelector('#quartier-couleur');\n let quartierNoir = document.querySelector('#quartier-noir');\n \n let consultationTranslate = 200;\n let quartierTranslate = -200;\n\n function startCountdown() {\n let startTime;\n let animationTime = 1800;\n\n function animate(timestamp) {\n if (!startTime) startTime = timestamp;\n const elapsedTime = timestamp - startTime;\n\n if (elapsedTime <= animationTime) {\n const animationPercent = elapsedTime / animationTime;\n animateLogo(animationPercent);\n requestAnimationFrame(animate);\n } else {\n animateLogo(1);\n }\n\n }\n requestAnimationFrame(animate);\n }\n\n // function animateLogo(animationPercent) {\n // for (let i = 0; i < chemins.length; i++) {\n // let draw = chemins[i].getTotalLength() * animationPercent;\n // chemins[i].style.strokeDashoffset = chemins[i].getTotalLength() - draw;\n // chemins[i].style.opacity = Math.min(animationPercent * ((chemins.length - 1) / i), 1);\n // }\n // let animationPercentCouleur = Math.min(animationPercent / 0.5, 1);\n // let animationPercentNoir = Math.max((animationPercent - 0.4) / 0.6, 0);\n\n // consultationCouleur.style.opacity = animationPercentCouleur;\n // consultationNoir.style.opacity = animationPercentNoir;\n // quartierCouleur.style.opacity = animationPercentCouleur;\n // quartierNoir.style.opacity = animationPercentNoir;\n\n // consultationNoir.style.transform = `translate(${consultationTranslate * (animationPercent - 1)}px, ${consultationTranslate * (animationPercent - 1)}px)`;\n\n // quartierNoir.style.transform = `translate(${quartierTranslate * (animationPercent - 1)}px, ${quartierTranslate * (animationPercent - 1)}px)`;\n // }\n\n function animateLogo(animationPercent) {\n // Calcul du pourcentage de l'animation principale\n let mainAnimationPercent = animationPercent;\n\n // Décalage pour l'animation des éléments noir\n let noirDelay = 0.7; // Exemple de décalage de 30% de l'animation principale\n let noirQuartierDelay = 0.1; // Exemple de décalage de 30% de l'animation principale\n\n // Calcul du pourcentage de l'animation pour les éléments noir avec décalage\n let animationPercentNoir = Math.max((mainAnimationPercent - noirDelay) / (1 - noirDelay), 0);\n\n for (let i = 0; i < chemins.length; i++) {\n let draw = chemins[i].getTotalLength() * mainAnimationPercent;\n chemins[i].style.strokeDashoffset = chemins[i].getTotalLength() - draw;\n chemins[i].style.opacity = Math.min(mainAnimationPercent * ((chemins.length - 1) / i), 1);\n }\n let animationPercentCouleur = Math.min(mainAnimationPercent / 0.5, 1);\n\n let animationPercentNoirQuartier = Math.max((mainAnimationPercent - noirQuartierDelay) / (1 - noirQuartierDelay), 0);\n\n for (let i = 0; i < chemins.length; i++) {\n let draw = chemins[i].getTotalLength() * mainAnimationPercent;\n chemins[i].style.strokeDashoffset = chemins[i].getTotalLength() - draw;\n chemins[i].style.opacity = Math.min(mainAnimationPercent * ((chemins.length - 1) / i), 1);\n }\n consultationCouleur.style.opacity = animationPercentCouleur;\n consultationNoir.style.opacity = animationPercentNoir;\n quartierCouleur.style.opacity = animationPercentCouleur;\n quartierNoir.style.opacity = animationPercentNoirQuartier;\n\n // Décalage des éléments noir dans le temps\n consultationNoir.style.transform = `translate(${consultationTranslate * (mainAnimationPercent - 1)}px, ${consultationTranslate * (mainAnimationPercent - 1)}px)`;\n quartierNoir.style.transform = `translate(${quartierTranslate * (mainAnimationPercent - 1)}px, ${quartierTranslate * (mainAnimationPercent - 1)}px)`;\n}\n\n\n\n window.addEventListener('load', startCountdown);\n\n\n//# sourceURL=webpack://quartiers_de_demain/./src/assets/js/animated_logo.js?");
eval("// document.addEventListener(\"DOMContentLoaded\", function() {\n// const pathToRotate = document.getElementById('path257');\n// let rotationAngle = 0;\n\n// // function rotatePath() {\n// // rotationAngle += 1; // Augmente l'angle de rotation\n// // pathToRotate.setAttribute('transform', `translate(1460.9323, 1201.6543) rotate(${rotationAngle}, 5, -10)`); // Applique la transformation de rotation\n// // }\n\n// // setInterval(rotatePath, 10); // Appelle la fonction rotatePath toutes les 10 millisecondes (ajustez selon vos besoins)\n// });\n\n//# sourceURL=webpack://quartiers_de_demain/./src/assets/js/animated_formes.js?");
/***/ }),
@ -115,7 +115,7 @@ eval("/**\n * @file\n * quartiers_de_demain behaviors.\n */\n (function (Drupal)
/******/ // Load entry module and return exports
/******/ // This entry module can't be inlined because the eval devtool is used.
/******/ __webpack_modules__["./src/assets/js/quartiers_de_demain.js"](0, {}, __webpack_require__);
/******/ __webpack_modules__["./src/assets/js/animated_logo.js"](0, {}, __webpack_require__);
/******/ __webpack_modules__["./src/assets/js/animated_formes.js"](0, {}, __webpack_require__);
/******/ var __webpack_exports__ = {};
/******/ __webpack_modules__["./src/assets/scss/quartiers_de_demain.scss"](0, __webpack_exports__, __webpack_require__);
/******/

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

@ -1061,6 +1061,11 @@ footer {
right: 20%;
top: 2rem;
}
@media (max-width: 810px) {
#home .__container-deroulement::before {
display: none;
}
}
#home .__container-deroulement::after {
content: url("../img/formes-animees-7.svg");
display: block;
@ -1069,6 +1074,11 @@ footer {
right: 26%;
bottom: -9rem;
}
@media (max-width: 810px) {
#home .__container-deroulement::after {
display: none;
}
}
#home .__container-deroulement h2 {
width: fit-content;
margin: auto;
@ -1447,23 +1457,16 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
#home .config_pages--type--diaporama-home {
position: relative;
}
#home .config_pages--type--diaporama-home::after {
content: url("../img/formes-animees-1.svg");
display: block;
width: 50%;
#home .config_pages--type--diaporama-home #svg1 {
position: absolute;
z-index: 5;
right: 11rem;
bottom: -6rem;
bottom: -8rem;
width: 50%;
}
@media (max-width: 810px) {
#home .config_pages--type--diaporama-home::after {
bottom: -5rem;
}
}
@media (max-width: 810px) {
#home .config_pages--type--diaporama-home::after {
bottom: -5rem;
#home .config_pages--type--diaporama-home #svg1 {
display: none;
}
}
#home .config_pages--type--diaporama-home .field_field_images img {
@ -1480,6 +1483,11 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
#home article.node-type-static {
padding-top: 6rem;
}
@media (max-width: 810px) {
#home article.node-type-static {
padding-top: 4rem;
}
}
#home article.node-type-static .field_title {
display: none;
}
@ -1499,6 +1507,11 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
left: 1rem;
bottom: 0;
}
@media (max-width: 810px) {
#home article.node-type-static .field_body::after {
display: none;
}
}
@media (max-width: 1090px) {
#home article.node-type-static .field_body {
flex-direction: column;
@ -1560,6 +1573,11 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
right: 15%;
bottom: 45%;
}
@media (max-width: 810px) {
#home article.node-type-static #paragraph-id--1::after {
display: none;
}
}
#home article.node-type-static #paragraph-id--1 .field_field_title {
font-family: "gilroy-bold";
}
@ -1800,6 +1818,11 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
left: 10%;
top: -6rem;
}
@media (max-width: 810px) {
#home article.node-type-static #paragraph-id--6::before {
display: none;
}
}
#home article.node-type-static #paragraph-id--6::after {
content: url("../img/formes-animees-5.svg");
display: block;
@ -1808,6 +1831,11 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
right: 15%;
top: 3rem;
}
@media (max-width: 810px) {
#home article.node-type-static #paragraph-id--6::after {
display: none;
}
}
@media (max-width: 500px) {
#home article.node-type-static #paragraph-id--6 {
width: 90%;

6
web/themes/custom/quartiers_de_demain/dist/assets/img/formes-animees-1.svg vendored
View File

@ -4,11 +4,9 @@
<svg
version="1.1"
id="svg1"
width="100%"
height="100%"
width="1266.1704"
height="586.80396"
viewBox="0 0 1266.1704 586.80395"
preserveAspectRatio="xMinYMin meet"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<defs

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.3 KiB

After

Width:  |  Height:  |  Size: 1.3 KiB