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

let asideDowns1 = document.getElementsByClassName('asideDown1');
Array.from(asideDowns1).forEach(asideDown1 => {
 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.9); // Limite la progression à 0.3 (pour éviter un dépassement)
    translateY = 410 * progress * (0.7 - progress); // Réduction de la vitesse vers la fin de l'animation
    asideDown1.style.transform = `translateY(${translateY}%)`; // Appliquer la transformation
    if (progress < 0.7) {
        requestAnimationFrame(animate);
    }
    // if (progress >= 0.7) {
    //     // startTime = null;
    //     requestAnimationFrame(animate);

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

});


let asideDowns2 = document.getElementsByClassName('asideDown2');
Array.from(asideDowns2).forEach(asideDown2 => {
 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, 1); // Limite la progression à 0.3 (pour éviter un dépassement)
    translateY = 410 * progress * (0.7 - progress); // Réduction de la vitesse vers la fin de l'animation
    asideDown2.style.transform = `translateY(${translateY}%)`; // Appliquer la transformation
    if (progress < 0.7) {
        requestAnimationFrame(animate);
    }
    // if (progress >= 0.7) {
    //     // startTime = null;
    //     requestAnimationFrame(animate);

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

});


let asideDown3 = document.getElementById('circle_vert_clair_erable_6');
 function slideDown() {
  let translateY = 0; // Position de départ (en bas)
  let duration = 23000; // 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, 1); // Limite la progression à 0.3 (pour éviter un dépassement)
    translateY = 410 * progress * (0.7 - progress); // Réduction de la vitesse vers la fin de l'animation
    asideDown3.style.transform = `translateY(${translateY}%)`; // Appliquer la transformation
    if (progress < 0.7) {
        requestAnimationFrame(animate);
    }
    // if (progress >= 0.7) {
    //     // startTime = null;
    //     requestAnimationFrame(animate);

    // }
}
requestAnimationFrame(animate);
}
slideDown(); // 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 * (0.7 - 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
// });