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 // });