105 lines
4.4 KiB
JavaScript
105 lines
4.4 KiB
JavaScript
|
|
function setLogoContainerSize() {
|
|
let svgContainer = document.querySelector('#logo-animated');
|
|
let svgElement = document.querySelector('#logo-animated svg');
|
|
svgContainer.style.height = `${svgElement.clientHeight}px`;
|
|
}
|
|
setLogoContainerSize();
|
|
window.addEventListener('resize', setLogoContainerSize);
|
|
console.log('animated');
|
|
|
|
let chemins = document.querySelectorAll('#logo-animated svg 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 = 1800;
|
|
|
|
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)`;
|
|
// }
|
|
|
|
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 = animationPercentNoirQuartier;
|
|
|
|
// 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)`;
|
|
}
|
|
|
|
|
|
|
|
window.addEventListener('load', startCountdown);
|