Popsu-coloque/web/themes/custom/colloque2024/js/animation_home.js

// Récupérer la forme SVG


// let dropdowns = document.getElementsByClassName('dropdown');
// console.log(dropdowns);

// // Parcourir tous les éléments sélectionnés
// Array.from(dropdowns).forEach(dropdown => {
//  function slideDown() {
//   let translateY = -50; // Position de départ (en bas)

//   function animate() {
//     translateY += 1; // Déplacement d'un pixel vers le haut à chaque itération
//     dropdown.style.transform = `translateY(${translateY}%)`; // Appliquer la transformation
          
//     // dropdown.setAttribute('transform', `translate(0, ${translateY})`); // Appliquer la transformation

//     if (translateY < 100) { // Limite la hauteur à laquelle la forme doit être animée
//       requestAnimationFrame(animate); // Appel récursif de la fonction animate
//     }
//   }

//   animate(); // Lancer l'animation
// }

// slideDown(); // Lancer l'animation lorsque la page est chargée
// });


let dropdowns1 = document.getElementsByClassName('dropdown1');
console.log(dropdowns1);
Array.from(dropdowns1).forEach(dropdown1 => {
 function slideDown() {
  let translateY = 0; // Position de départ (en bas)
  let duration = 17000; // Durée de l'animation en millisecondes
  let startTime = null; // Temps de départ de l'animation
  function animate(timestamp) {
    if (!startTime) startTime = timestamp; // Initialise le temps de départ si ce n'est pas déjà fait
    let progress = (timestamp - startTime) / duration; // Calcul de la progression de l'animation
    progress = Math.min(progress, 0.3); // Limite la progression à 0.3 (pour éviter un dépassement)
    translateY = 410 * progress * (0.48 - progress); // Réduction de la vitesse vers la fin de l'animation
    dropdown1.style.transform = `translateY(${translateY}%)`; // Appliquer la transformation
    if (progress < 0.999999) {
        requestAnimationFrame(animate);
    }
}
requestAnimationFrame(animate);
}
slideDown(); // Lancer l'animation lorsque la page est chargée
});

let dropdowns2 = document.getElementsByClassName('dropdown2');
console.log(dropdowns2);
Array.from(dropdowns2).forEach(dropdown2 => {
 function slideDown() {
  let translateY = 0; // Position de départ (en bas)
  let duration = 20000; // Durée de l'animation en millisecondes
  let startTime = null; // Temps de départ de l'animation
  function animate(timestamp) {
    if (!startTime) startTime = timestamp; // Initialise le temps de départ si ce n'est pas déjà fait
    let progress = (timestamp - startTime) / duration; // Calcul de la progression de l'animation
    progress = Math.min(progress, 0.3); // Limite la progression à 1 (pour éviter un dépassement)
    translateY = 280 * progress * (1 - progress); // Déplacement d'un pixel vers le haut à chaque itération
    dropdown2.style.transform = `translateY(${translateY}%)`; // Appliquer la transformation
    if (progress < 0.999) {
      requestAnimationFrame(animate);
    }
  }
requestAnimationFrame(animate);
}
slideDown(); // Lancer l'animation lorsque la page est chargée
});

let dropdowns3 = document.getElementsByClassName('dropdown3');
console.log(dropdowns3);
Array.from(dropdowns3).forEach(dropdown3 => {
 function slideDown() {
  let translateY = 0; // Position de départ (en bas)
  let duration = 18000; // Durée de l'animation en millisecondes
  let startTime = null; // Temps de départ de l'animation
  function animate(timestamp) {
    if (!startTime) startTime = timestamp; // Initialise le temps de départ si ce n'est pas déjà fait
    let progress = (timestamp - startTime) / duration; // Calcul de la progression de l'animation
    progress = Math.min(progress, 0.5); // Limite la progression à 1 (pour éviter un dépassement)
    translateY = 235 * progress * (1 - progress); // Déplacement d'un pixel vers le haut à chaque itération
    dropdown3.style.transform = `translateY(${translateY}%)`; // Appliquer la transformation
    if (progress < 0.8) {
      requestAnimationFrame(animate);
    }
  }
requestAnimationFrame(animate);
}
slideDown(); // Lancer l'animation lorsque la page est chargée
});

let dropdowns4 = document.getElementsByClassName('dropdown4');
console.log(dropdowns4);
Array.from(dropdowns4).forEach(dropdown4 => {
 function slideDown() {
  let translateY = 0; // Position de départ (en bas)
  let duration = 25000; // Durée de l'animation en millisecondes
  let startTime = null; // Temps de départ de l'animation
  function animate(timestamp) {
    if (!startTime) startTime = timestamp; // Initialise le temps de départ si ce n'est pas déjà fait
    let progress = (timestamp - startTime) / duration; // Calcul de la progression de l'animation
    progress = Math.min(progress, 0.5); // Limite la progression à 1 (pour éviter un dépassement)
    translateY = 335 * progress * (1 - progress); // Déplacement d'un pixel vers le haut à chaque itération
    dropdown4.style.transform = `translateY(${translateY}%)`; // Appliquer la transformation
    if (progress < 0.8) {
      requestAnimationFrame(animate);
    }
  }
requestAnimationFrame(animate);
}
slideDown(); // Lancer l'animation lorsque la page est chargée
});


let dropdowns5 = document.getElementsByClassName('dropdown5');
console.log(dropdowns5);
Array.from(dropdowns5).forEach(dropdown5 => {
 function slideDown() {
    let translateY = 0; // Position de départ (en bas)
    let duration = 10000; // Durée de l'animation en millisecondes
    let startTime = null; // Temps de départ de l'animation
    function animate(timestamp) {
      if (!startTime) startTime = timestamp; // Initialise le temps de départ si ce n'est pas déjà fait
      let progress = (timestamp - startTime) / duration; // Calcul de la progression de l'animation
      progress = Math.min(progress, 0.5); // Limite la progression à 1 (pour éviter un dépassement)
      translateY = 200 * progress * (1 - progress); // Déplacement d'un pixel vers le haut à chaque itération
      dropdown5.style.transform = `translateY(${translateY}%)`; // Appliquer la transformation
      if (progress < 0.8) {
        requestAnimationFrame(animate);
      }
    }
    requestAnimationFrame(animate);
  }
  slideDown(); // Lancer l'animation lorsque la page est chargée
});

let tolefts1 = document.getElementsByClassName('toleft1');
Array.from(tolefts1).forEach(toleft1 => {
  function slideLeft() {
      let translateX = 0; // Position de départ (en bas)
      let duration = 10000; // Durée de l'animation en millisecondes
      let startTime = null; // Temps de départ de l'animation
      function animate(timestamp) {
          if (!startTime) startTime = timestamp; // Initialise le temps de départ si ce n'est pas déjà fait
          let progress = (timestamp - startTime) / duration; // Calcul de la progression de l'animation
          progress = Math.min(progress, 0.5); // Limite la progression à 1 (pour éviter un dépassement)
          translateX = -100 * progress * (1 - progress); // -20 est la distance maximale à laquelle vous voulez déplacer l'élément
          toleft1.style.transform = `translateX(${translateX}%)`;
          if (progress < 0.8) {
              requestAnimationFrame(animate);
          }
      }
      requestAnimationFrame(animate);
  }
  slideLeft(); // Lancer l'animation lorsque la page est chargée
});


let tolefts2 = document.getElementsByClassName('toleft2');
Array.from(tolefts2).forEach(toleft2 => {
    function slideLeft() {
        let translateX = 0; // Position de départ (en bas)
        let duration = 4000; // Durée de l'animation en millisecondes
        let startTime = null; // Temps de départ de l'animation
        function animate(timestamp) {
            if (!startTime) startTime = timestamp; // Initialise le temps de départ si ce n'est pas déjà fait
            let progress = (timestamp - startTime) / duration; // Calcul de la progression de l'animation
            progress = Math.min(progress, 0.5); // Limite la progression à 1 (pour éviter un dépassement)
            translateX = -32 * progress * (1 - progress); // -20 est la distance maximale à laquelle vous voulez déplacer l'élément
            toleft2.style.transform = `translateX(${translateX}%)`;
            if (progress < 0.8) {
                requestAnimationFrame(animate);
            }
        }
        requestAnimationFrame(animate);
    }
    slideLeft(); // Lancer l'animation lorsque la page est chargée
});

let tolefts3 = document.getElementsByClassName('toleft3');
Array.from(tolefts3).forEach(toleft3 => {
    function slideLeft() {
        let translateX = 0; // Position de départ (en bas)
        let duration = 4000; // Durée de l'animation en millisecondes
        let startTime = null; // Temps de départ de l'animation
        function animate(timestamp) {
            if (!startTime) startTime = timestamp; // Initialise le temps de départ si ce n'est pas déjà fait
            let progress = (timestamp - startTime) / duration; // Calcul de la progression de l'animation
            progress = Math.min(progress, 0.5); // Limite la progression à 1 (pour éviter un dépassement)
            translateX = -45 * progress * (1 - progress); // -20 est la distance maximale à laquelle vous voulez déplacer l'élément
            toleft3.style.transform = `translateX(${translateX}%)`;
            if (progress < 0.8) {
                requestAnimationFrame(animate);
            }
        }
        requestAnimationFrame(animate);
    }
    slideLeft(); // Lancer l'animation lorsque la page est chargée
});


let tolefts4 = document.getElementsByClassName('toleft4');
Array.from(tolefts4).forEach(toleft4 => {
    function slideLeft() {
        let translateX = 0; // Position de départ (en bas)
        let duration = 8000; // Durée de l'animation en millisecondes
        let startTime = null; // Temps de départ de l'animation
        function animate(timestamp) {
            if (!startTime) startTime = timestamp; // Initialise le temps de départ si ce n'est pas déjà fait
            let progress = (timestamp - startTime) / duration; // Calcul de la progression de l'animation
            progress = Math.min(progress, 0.5); // Limite la progression à 1 (pour éviter un dépassement)
            translateX = -110 * progress * (0.90 - progress); // -20 est la distance maximale à laquelle vous voulez déplacer l'élément
            toleft4.style.transform = `translateX(${translateX}%)`;
            if (progress < 0.8) {
                requestAnimationFrame(animate);
            }
        }
        requestAnimationFrame(animate);
    }
    slideLeft(); // Lancer l'animation lorsque la page est chargée
});

let torights1 = document.getElementsByClassName('toright1');
Array.from(torights1).forEach(toright1 => {
 function slideRight() {
  let translateX = 0; // Position de départ (en bas)
  let duration = 13000; // Durée de l'animation en millisecondes
  let startTime = null; // Temps de départ de l'animation
  function animate(timestamp) {
    if (!startTime) startTime = timestamp; // Initialise le temps de départ si ce n'est pas déjà fait
    let progress = (timestamp - startTime) / duration; // Calcul de la progression de l'animation
    progress = Math.min(progress, 0.5); // Limite la progression à 1 (pour éviter un dépassement)
    translateX = 135 * progress * (0.99 - progress); // Déplacement d'un pixel vers le haut à chaque itération
    toright1.style.transform = `translateX(${translateX}%)`; // Appliquer la transformation
    if (progress < 0.8) { // Limite la hauteur à laquelle la forme doit être animée
      requestAnimationFrame(animate); // Appel récursif de la fonction animate
    }
  }
  requestAnimationFrame(animate);
}
slideRight(); // Lancer l'animation lorsque la page est chargée
});


let torights2 = document.getElementsByClassName('toright2');
Array.from(torights2).forEach(toright2 => {
 function slideRight() {
  let translateX = 0; // Position de départ (en bas)
  function animate() {
    translateX += 0.5; // Déplacement d'un pixel vers le haut à chaque itération
    toright2.style.transform = `translateX(${translateX}%)`; // Appliquer la transformation
    if (translateX < 0) { // Limite la hauteur à laquelle la forme doit être animée
      requestAnimationFrame(animate); // Appel récursif de la fonction animate
    }
  }
  animate(); // Lancer l'animation
}
slideRight(); // Lancer l'animation lorsque la page est chargée
});



let torights3 = document.getElementsByClassName('toright3');
Array.from(torights3).forEach(toright3 => {
 function slideRight(timestamp) {
  let translateX = 0; // Position de départ (en bas)
  let duration = 13000; // Durée de l'animation en millisecondes
  let startTime = null; // Temps de départ de l'animation
  function animate(timestamp) {
    if (!startTime) startTime = timestamp; // Initialise le temps de départ si ce n'est pas déjà fait
    let progress = (timestamp - startTime) / duration; // Calcul de la progression de l'animation
    progress = Math.min(progress, 0.5); // Limite la progression à 1 (pour éviter un dépassement)
    translateX = 240 * progress * (0.98 - progress); // Déplacement d'un pixel vers le haut à chaque itération
    toright3.style.transform = `translateX(${translateX}%)`; // Appliquer la transformation
    if (progress < 0.8) { // Limite la hauteur à laquelle la forme doit être animée
      requestAnimationFrame(animate); // Appel récursif de la fonction animate
    }
  }
  requestAnimationFrame(animate);
}
slideRight(); // Lancer l'animation lorsque la page est chargée
});


let moveups = document.getElementsByClassName('moveup');
console.log(moveups);
Array.from(moveups).forEach(moveup => {
  function slideUp() {
    let translateY = 0; // Position de départ (en bas)
    let duration = 6000; // Durée de l'animation en millisecondes
    let startTime = null; // Temps de départ de l'animation
    function animate(timestamp) {
      if (!startTime) startTime = timestamp; // Initialise le temps de départ si ce n'est pas déjà fait
      let progress = (timestamp - startTime) / duration; // Calcul de la progression de l'animation
      progress = Math.min(progress, 0.8); // Limite la progression à 1 (pour éviter un dépassement)
      translateY = -10 * progress * (1 - progress); // Déplacement d'un pixel vers le haut à chaque itération
      moveup.style.transform = `translateY(${translateY}%)`; // Appliquer la transformation
      if (progress < 0.8) {
        requestAnimationFrame(animate);
      }
    }
    requestAnimationFrame(animate);
  } 
slideUp(); // Lancer l'animation lorsque la page est chargée
});