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

smooth animation front

Browse Source
This commit is contained in:
Ouidade Soussi Chiadmi
2024-05-08 16:48:46 +02:00
parent e707a3c590
commit 4c952d315a
4 changed files with 224 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
web/themes/custom/quartiers_de_demain/js/animated_logo.js
View File

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