animated background

2024-04-21 17:20:52 +02:00
parent 67775e5d42
commit e560e5914b
8 changed files with 564 additions and 303 deletions
@@ -3,31 +3,299 @@
 // Récupérer la forme SVG


-let dropdowns = document.getElementsByClassName('dropdown');
-console.log(dropdowns);
+// 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)
+// // 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
+//   function animate() {
+//     translateY += 1; // Déplacement d'un pixel vers le haut à chaque itération
+//     dropdown.style.transform = `translateY(${translateY}%)`; // Appliquer la transformation
          
-    // dropdown.setAttribute('transform', `translate(0, ${translateY})`); // 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
+//     if (translateY < 100) { // 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 dropdowns1 = document.getElementsByClassName('dropdown1');
+console.log(dropdowns1);
+Array.from(dropdowns1).forEach(dropdown1 => {
+ function slideDown() {
+  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.3); // Limite la progression à 1 (pour éviter un dépassement)
+    progress = easeInOut(progress);
+    translateY = 70 * progress; // Déplacement d'un pixel vers le haut à chaque itération
+    dropdown1.style.transform = `translateY(${translateY}%)`; // Appliquer la transformation
+    if (progress < 0.8) {
+      requestAnimationFrame(animate);
+    }
+  }
+  function easeInOut(t) {
+    return t < 0.5 ? 4 * t * t : -1 + (10 - 2 * t) * t;
+}
+requestAnimationFrame(animate);
+}
+slideDown(); // Lancer l'animation lorsque la page est chargée
+});
+
+let dropdowns2 = document.getElementsByClassName('dropdown2');
+console.log(dropdowns2);
+Array.from(dropdowns2).forEach(dropdown2 => {
+ function slideDown() {
+  let translateY = 0; // Position de départ (en bas)
+  let duration = 9000; // 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.3); // Limite la progression à 1 (pour éviter un dépassement)
+    progress = easeInOut(progress);
+    translateY = 120 * progress; // Déplacement d'un pixel vers le haut à chaque itération
+    dropdown2.style.transform = `translateY(${translateY}%)`; // Appliquer la transformation
+    if (progress < 0.8) {
+      requestAnimationFrame(animate);
+    }
+  }
+  function easeInOut(t) {
+    return t < 0.5 ? 4 * t * t : -1 + (10 - 2 * t) * t;
+}
+requestAnimationFrame(animate);
+}
+slideDown(); // Lancer l'animation lorsque la page est chargée
+});
+
+let dropdowns3 = document.getElementsByClassName('dropdown3');
+console.log(dropdowns3);
+Array.from(dropdowns3).forEach(dropdown3 => {
+ function slideDown() {
+  let translateY = 0; // Position de départ (en bas)
+  let duration = 7000; // 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)
+    progress = easeInOut(progress);
+    translateY = 75 * progress; // Déplacement d'un pixel vers le haut à chaque itération
+    dropdown3.style.transform = `translateY(${translateY}%)`; // Appliquer la transformation
+    if (progress < 0.8) {
+      requestAnimationFrame(animate);
+    }
+  }
+  function easeInOut(t) {
+    return t < 0.5 ? 4 * t * t : -1 + (10 - 2 * t) * t;
+}
+requestAnimationFrame(animate);
+}
+slideDown(); // Lancer l'animation lorsque la page est chargée
+});
+
+let dropdowns4 = document.getElementsByClassName('dropdown4');
+console.log(dropdowns4);
+Array.from(dropdowns4).forEach(dropdown4 => {
+ function slideDown() {
+  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.5); // Limite la progression à 1 (pour éviter un dépassement)
+    progress = easeInOut(progress);
+    translateY = 85 * progress; // Déplacement d'un pixel vers le haut à chaque itération
+    dropdown4.style.transform = `translateY(${translateY}%)`; // Appliquer la transformation
+    if (progress < 0.8) {
+      requestAnimationFrame(animate);
+    }
+  }
+  function easeInOut(t) {
+    return t < 0.5 ? 4 * t * t : -1 + (10 - 2 * t) * t;
+}
+requestAnimationFrame(animate);
+}
+slideDown(); // Lancer l'animation lorsque la page est chargée
+});
+
+
+let dropdowns5 = document.getElementsByClassName('dropdown5');
+console.log(dropdowns5);
+Array.from(dropdowns5).forEach(dropdown5 => {
+ function slideDown() {
+  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.5); // Limite la progression à 1 (pour éviter un dépassement)
+    progress = easeInOut(progress);
+    translateY = 70 * progress; // Déplacement d'un pixel vers le haut à chaque itération
+    dropdown5.style.transform = `translateY(${translateY}%)`; // Appliquer la transformation
+    if (progress < 0.8) {
+      requestAnimationFrame(animate);
+    }
+  }
+  function easeInOut(t) {
+    return t < 0.5 ? 4 * t * t : -1 + (10 - 2 * t) * t;
+}
+requestAnimationFrame(animate);
+}
+slideDown(); // Lancer l'animation lorsque la page est chargée
+});
+
+let tolefts1 = document.getElementsByClassName('toleft1');
+Array.from(tolefts1).forEach(toleft1 => {
+    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)
+            progress = easeInOut(progress);
+            translateX = -32 * progress; // -20 est la distance maximale à laquelle vous voulez déplacer l'élément
+            toleft1.style.transform = `translateX(${translateX}%)`;
+            if (progress < 0.8) {
+                requestAnimationFrame(animate);
+            }
+        }
+        function easeInOut(t) {
+            return t < 0.5 ? 4 * t * t : -1 + (4 - 2 * t) * t;
+        }
+        requestAnimationFrame(animate);
+    }
+    slideLeft(); // Lancer l'animation lorsque la page est chargée
+});
+
+
+let tolefts2 = document.getElementsByClassName('toleft2');
+Array.from(tolefts2).forEach(toleft2 => {
+    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)
+            progress = easeInOut(progress);
+            translateX = -32 * progress; // -20 est la distance maximale à laquelle vous voulez déplacer l'élément
+            toleft2.style.transform = `translateX(${translateX}%)`;
+            if (progress < 0.8) {
+                requestAnimationFrame(animate);
+            }
+        }
+        function easeInOut(t) {
+            return t < 0.5 ? 4 * t * t : -1 + (4 - 2 * t) * t;
+        }
+        requestAnimationFrame(animate);
+    }
+    slideLeft(); // Lancer l'animation lorsque la page est chargée
+});
+
+let tolefts3 = document.getElementsByClassName('toleft3');
+Array.from(tolefts3).forEach(toleft3 => {
+    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)
+            progress = easeInOut(progress);
+            translateX = -35 * progress; // -20 est la distance maximale à laquelle vous voulez déplacer l'élément
+            toleft3.style.transform = `translateX(${translateX}%)`;
+            if (progress < 0.8) {
+                requestAnimationFrame(animate);
+            }
+        }
+        function easeInOut(t) {
+            return t < 0.5 ? 4 * t * t : -1 + (4 - 2 * t) * t;
+        }
+        requestAnimationFrame(animate);
+    }
+    slideLeft(); // Lancer l'animation lorsque la page est chargée
+});
+
+
+let torights1 = document.getElementsByClassName('toright1');
+Array.from(torights1).forEach(toright1 => {
+ 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
+    toright1.style.transform = `translateX(${translateX}%)`; // Appliquer la transformation
+    if (translateX < 31) { // 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
+slideRight(); // Lancer l'animation lorsque la page est chargée
 });

+let torights2 = document.getElementsByClassName('toright2');
+Array.from(torights2).forEach(toright2 => {
+ 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
+    toright2.style.transform = `translateX(${translateX}%)`; // Appliquer la transformation
+    if (translateX < 0) { // 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 torights3 = document.getElementsByClassName('toright3');
+console.log(torights3)
+Array.from(torights3).forEach(toright3 => {
+ function slideRight() {
+  let translateX = 0; // Position de départ (en bas)
+  function animate() {
+    translateX += 0.9; // Déplacement d'un pixel vers le haut à chaque itération
+    toright3.style.transform = `translateX(${translateX}%)`; // Appliquer la transformation
+    if (translateX < 59) { // 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 moveups = document.getElementsByClassName('moveup');
 console.log(moveups);
@@ -113,44 +381,3 @@ 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
-});