animated background

web/themes/custom/colloque2024/js/animation_home.js

@@ -1,14 +1,21 @@
-// Récupérer la forme SVG
-const circle = document.getElementById('circle_orange');
-console.log(circle);
 
-// Fonction pour animer la forme
-function slideIn() {
+
+// 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
-    circle.setAttribute('transform', `translate(0, ${translateY})`); // Appliquer la transformation
+    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
@@ -18,4 +25,132 @@ function slideIn() {
   animate(); // Lancer l'animation
 }
 
-slideIn(); // Lancer l'animation lorsque la page est chargée
+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
+});