107 lines
4.4 KiB
JavaScript
107 lines
4.4 KiB
JavaScript
|
|
|
|
|
|
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
|
|
// });
|