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}px)`; // Appliquer la transformation
          
    // dropdown.setAttribute('transform', `translate(0, ${translateY})`); // Appliquer la transformation

    if (translateY < 200) { // 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 moveups = document.getElementsByClassName('moveup');
console.log(moveups);

// Parcourir tous les éléments sélectionnés
Array.from(moveups).forEach(moveup => {
 function slideUp() {
  let translateY = 0; // Position de départ (en bas)

  function animate() {
    translateY -= 0.5; // Déplacement d'un pixel vers le haut à chaque itération
    moveup.style.transform = `translateY(${translateY}%)`; // Appliquer la transformation
    
    if (translateY > -25) { // Limite la hauteur à laquelle la forme doit être animée
      requestAnimationFrame(animate); // Appel récursif de la fonction animate
    }
  }

  animate(); // Lancer l'animation
}

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

let torights = document.getElementsByClassName('toright');
console.log(torights);

// Parcourir tous les éléments sélectionnés
Array.from(torights).forEach(toright => {
 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
    toright.style.transform = `translateX(${translateX}%)`; // Appliquer la transformation
    
    if (translateX > -25) { // 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 torightslows = document.getElementsByClassName('torightslow');
console.log(torightslows);

// Parcourir tous les éléments sélectionnés
Array.from(torightslows).forEach(torightslow => {
 function slideRightSlow() {
  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.8); // Limite la progression à 1 (pour éviter un dépassement)

    // Utilise une fonction d'interpolation (ease-in-out) pour ajuster la progression
    progress = easeInOut(progress);

    translateX = 60 * progress; // Déplacement d'un pixel vers le haut à chaque itération
    torightslow.style.transform = `translateX(${translateX}%)`; // Appliquer la transformation
    
    if (progress < 0.8) {
      requestAnimationFrame(animate);
    }
  }

  function easeInOut(t) {
    return t < 0.5 ? 4 * t * t : -1 + (10 - 2 * t) * t;
}

// Lance l'animation
requestAnimationFrame(animate);
}

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

let tolefts = document.getElementsByClassName('toleft');
console.log(tolefts);

// Parcourir tous les éléments sélectionnés
Array.from(tolefts).forEach(toleft => {
    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)

            // Utilise une fonction d'interpolation (ease-in-out) pour ajuster la progression
            progress = easeInOut(progress);

            // Calcule la translation en fonction de la progression
            translateX = -20 * progress; // -20 est la distance maximale à laquelle vous voulez déplacer l'élément

            // Applique la transformation à l'élément
            toleft.style.transform = `translateX(${translateX}%)`;

            // Continue l'animation si la progression n'a pas atteint 1
            if (progress < 0.8) {
                requestAnimationFrame(animate);
            }
        }

        // Fonction d'interpolation (ease-in-out)
        function easeInOut(t) {
            return t < 0.5 ? 4 * t * t : -1 + (4 - 2 * t) * t;
        }

        // Lance l'animation
        requestAnimationFrame(animate);
    }

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