diff --git a/web/themes/custom/quartiers_de_demain/css/animated_logo.css b/web/themes/custom/quartiers_de_demain/css/animated_logo.css new file mode 100644 index 0000000..524571c --- /dev/null +++ b/web/themes/custom/quartiers_de_demain/css/animated_logo.css @@ -0,0 +1,66 @@ +#logo-animated-container { + width: 60%; + margin-left: 20%; + margin-right: 20%; +} + @media (max-width:810px) { + #logo-animated-container { + width: 74%; + margin-left: 13%; + margin-right: 13%; + } + } + @media (max-width:640px) { + #logo-animated-container { + width: 80%; + margin-left: 10%; + margin-right: 10%; + } + } +#logo-animated { + position: relative; + top: 0; + left: 0; + width: 100%; + max-width: 1300px; + max-height: 1000px; + overflow: hidden; + } + + + svg { + position: absolute; + width: 100%; + height: auto; + max-width: 1030px; + top: 0; + left: 0; + } + img { + position: absolute; + opacity: 0; + } + #consultation-couleur { + left: min(17%, 180px); + top: 0.5%; + width: 32%; + max-width: 330px; + } + #consultation-noir { + left: min(17%, 180px); + top: 0.5%; + width: 32%; + max-width: 330px; + } + #quartier-couleur { + width: 60%; + max-width: 620px; + left: min(30%, 310px); + top: 3%; + } + #quartier-noir { + width: 60%; + max-width: 620px; + left: min(30%, 310px); + top: 3%; + } diff --git a/web/themes/custom/quartiers_de_demain/images/consultation-couleurs.png b/web/themes/custom/quartiers_de_demain/images/consultation-couleurs.png new file mode 100644 index 0000000..a262d6c Binary files /dev/null and b/web/themes/custom/quartiers_de_demain/images/consultation-couleurs.png differ diff --git a/web/themes/custom/quartiers_de_demain/images/consultation-noir.png b/web/themes/custom/quartiers_de_demain/images/consultation-noir.png new file mode 100644 index 0000000..7825c6b Binary files /dev/null and b/web/themes/custom/quartiers_de_demain/images/consultation-noir.png differ diff --git a/web/themes/custom/quartiers_de_demain/images/quartier-couleur.png b/web/themes/custom/quartiers_de_demain/images/quartier-couleur.png new file mode 100644 index 0000000..98b0d3f Binary files /dev/null and b/web/themes/custom/quartiers_de_demain/images/quartier-couleur.png differ diff --git a/web/themes/custom/quartiers_de_demain/images/quartier-noir.png b/web/themes/custom/quartiers_de_demain/images/quartier-noir.png new file mode 100644 index 0000000..46b2835 Binary files /dev/null and b/web/themes/custom/quartiers_de_demain/images/quartier-noir.png differ diff --git a/web/themes/custom/quartiers_de_demain/js/animated_logo.js b/web/themes/custom/quartiers_de_demain/js/animated_logo.js new file mode 100644 index 0000000..f31768a --- /dev/null +++ b/web/themes/custom/quartiers_de_demain/js/animated_logo.js @@ -0,0 +1,69 @@ + +function setLogoContainerSize() { + let svgContainer = document.querySelector('#logo-animated'); + let svgElement = document.querySelector('svg'); + svgContainer.style.height = `${svgElement.clientHeight}px`; + } + setLogoContainerSize(); + window.addEventListener('resize', setLogoContainerSize); + + + let chemins = document.querySelectorAll('path'); + for (let chemin of chemins) { + let length = chemin.getTotalLength(); + chemin.style.strokeDasharray = length; + chemin.style.strokeDashoffset = length; + } + + + let consultationCouleur = document.querySelector('#consultation-couleur'); + let consultationNoir = document.querySelector('#consultation-noir'); + + let quartierCouleur = document.querySelector('#quartier-couleur'); + let quartierNoir = document.querySelector('#quartier-noir'); + + let consultationTranslate = 200; + let quartierTranslate = -200; + + function startCountdown() { + let startTime; + let animationTime = 800; + + function animate(timestamp) { + if (!startTime) startTime = timestamp; + const elapsedTime = timestamp - startTime; + + if (elapsedTime <= animationTime) { + const animationPercent = elapsedTime / animationTime; + animateLogo(animationPercent); + requestAnimationFrame(animate); + } else { + animateLogo(1); + } + + } + 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); + + 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)`; + } + + + + window.addEventListener('load', startCountdown); \ No newline at end of file diff --git a/web/themes/custom/quartiers_de_demain/quartiers_de_demain.libraries.yml b/web/themes/custom/quartiers_de_demain/quartiers_de_demain.libraries.yml index 5dc83fb..c703dbd 100644 --- a/web/themes/custom/quartiers_de_demain/quartiers_de_demain.libraries.yml +++ b/web/themes/custom/quartiers_de_demain/quartiers_de_demain.libraries.yml @@ -2,6 +2,8 @@ global: js: js/quartiers_de_demain.js: {} + js/animated_logo.js: {} css: theme: css/quartiers_de_demain.css: {} + css/animated_logo.css: {} diff --git a/web/themes/custom/quartiers_de_demain/templates/page--front.html.twig b/web/themes/custom/quartiers_de_demain/templates/page--front.html.twig index 0eaaadf..cb4068f 100644 --- a/web/themes/custom/quartiers_de_demain/templates/page--front.html.twig +++ b/web/themes/custom/quartiers_de_demain/templates/page--front.html.twig @@ -61,9 +61,23 @@
-
+
+
+ + + + + + + + + + + + +
{{ page.content }}
{# /.layout-content #} diff --git a/web/themes/custom/quartiers_de_demain/templates/page.html.twig b/web/themes/custom/quartiers_de_demain/templates/page.html.twig index aca2989..325c504 100644 --- a/web/themes/custom/quartiers_de_demain/templates/page.html.twig +++ b/web/themes/custom/quartiers_de_demain/templates/page.html.twig @@ -61,10 +61,10 @@
-
+{#
logo animé consultation quartiers de demain
- {{ page.content }} + #} {{ page.content }}
{# /.layout-content #} {% if page.sidebar_first %}