diff --git a/web/themes/custom/quartiers_de_demain/images/rond_1.svg b/web/themes/custom/quartiers_de_demain/images/rond_1.svg new file mode 100644 index 0000000..e83f1b3 --- /dev/null +++ b/web/themes/custom/quartiers_de_demain/images/rond_1.svg @@ -0,0 +1,53 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/web/themes/custom/quartiers_de_demain/images/rond_2.svg b/web/themes/custom/quartiers_de_demain/images/rond_2.svg new file mode 100644 index 0000000..6aef42b --- /dev/null +++ b/web/themes/custom/quartiers_de_demain/images/rond_2.svg @@ -0,0 +1,61 @@ + + + + + + + + + + + + + + + + + + + + + + + diff --git a/web/themes/custom/quartiers_de_demain/images/rond_3.svg b/web/themes/custom/quartiers_de_demain/images/rond_3.svg new file mode 100644 index 0000000..67414b5 --- /dev/null +++ b/web/themes/custom/quartiers_de_demain/images/rond_3.svg @@ -0,0 +1,61 @@ + + + + + + + + + + + + + + + + + + + + + + + diff --git a/web/themes/custom/quartiers_de_demain/js/animated_logo.js b/web/themes/custom/quartiers_de_demain/js/animated_logo.js index f8ca0a3..aab15b2 100644 --- a/web/themes/custom/quartiers_de_demain/js/animated_logo.js +++ b/web/themes/custom/quartiers_de_demain/js/animated_logo.js @@ -27,7 +27,7 @@ function setLogoContainerSize() { function startCountdown() { let startTime; - let animationTime = 2000; + let animationTime = 1800; function animate(timestamp) { if (!startTime) startTime = timestamp; @@ -45,24 +45,59 @@ function setLogoContainerSize() { requestAnimationFrame(animate); } - function animateLogo(animationPercent) { - for (let i = 0; i < chemins.length; i++) { - let draw = chemins[i].getTotalLength() * animationPercent; - chemins[i].style.strokeDashoffset = chemins[i].getTotalLength() - draw; - chemins[i].style.opacity = Math.min(animationPercent * ((chemins.length - 1) / i), 1); - } - let animationPercentCouleur = Math.min(animationPercent / 0.5, 1); - let animationPercentNoir = Math.max((animationPercent - 0.4) / 0.6, 0); + // function animateLogo(animationPercent) { + // for (let i = 0; i < chemins.length; i++) { + // let draw = chemins[i].getTotalLength() * animationPercent; + // chemins[i].style.strokeDashoffset = chemins[i].getTotalLength() - draw; + // chemins[i].style.opacity = Math.min(animationPercent * ((chemins.length - 1) / i), 1); + // } + // let animationPercentCouleur = Math.min(animationPercent / 0.5, 1); + // let animationPercentNoir = Math.max((animationPercent - 0.4) / 0.6, 0); + // consultationCouleur.style.opacity = animationPercentCouleur; + // consultationNoir.style.opacity = animationPercentNoir; + // quartierCouleur.style.opacity = animationPercentCouleur; + // quartierNoir.style.opacity = animationPercentNoir; + + // consultationNoir.style.transform = `translate(${consultationTranslate * (animationPercent - 1)}px, ${consultationTranslate * (animationPercent - 1)}px)`; + + // quartierNoir.style.transform = `translate(${quartierTranslate * (animationPercent - 1)}px, ${quartierTranslate * (animationPercent - 1)}px)`; + // } + + function animateLogo(animationPercent) { + // Calcul du pourcentage de l'animation principale + let mainAnimationPercent = animationPercent; + + // Décalage pour l'animation des éléments noir + let noirDelay = 0.7; // Exemple de décalage de 30% de l'animation principale + let noirQuartierDelay = 0.1; // Exemple de décalage de 30% de l'animation principale + + // Calcul du pourcentage de l'animation pour les éléments noir avec décalage + let animationPercentNoir = Math.max((mainAnimationPercent - noirDelay) / (1 - noirDelay), 0); + + for (let i = 0; i < chemins.length; i++) { + let draw = chemins[i].getTotalLength() * mainAnimationPercent; + chemins[i].style.strokeDashoffset = chemins[i].getTotalLength() - draw; + chemins[i].style.opacity = Math.min(mainAnimationPercent * ((chemins.length - 1) / i), 1); + } + let animationPercentCouleur = Math.min(mainAnimationPercent / 0.5, 1); + + let animationPercentNoirQuartier = Math.max((mainAnimationPercent - noirQuartierDelay) / (1 - noirQuartierDelay), 0); + + for (let i = 0; i < chemins.length; i++) { + let draw = chemins[i].getTotalLength() * mainAnimationPercent; + chemins[i].style.strokeDashoffset = chemins[i].getTotalLength() - draw; + chemins[i].style.opacity = Math.min(mainAnimationPercent * ((chemins.length - 1) / i), 1); + } consultationCouleur.style.opacity = animationPercentCouleur; consultationNoir.style.opacity = animationPercentNoir; quartierCouleur.style.opacity = animationPercentCouleur; - quartierNoir.style.opacity = animationPercentNoir; + quartierNoir.style.opacity = animationPercentNoirQuartier; - consultationNoir.style.transform = `translate(${consultationTranslate * (animationPercent - 1)}px, ${consultationTranslate * (animationPercent - 1)}px)`; - - quartierNoir.style.transform = `translate(${quartierTranslate * (animationPercent - 1)}px, ${quartierTranslate * (animationPercent - 1)}px)`; - } + // Décalage des éléments noir dans le temps + consultationNoir.style.transform = `translate(${consultationTranslate * (mainAnimationPercent - 1)}px, ${consultationTranslate * (mainAnimationPercent - 1)}px)`; + quartierNoir.style.transform = `translate(${quartierTranslate * (mainAnimationPercent - 1)}px, ${quartierTranslate * (mainAnimationPercent - 1)}px)`; +}