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)`;
+}