animated background

web/themes/custom/colloque2024/css-compiled/index.css

@@ -338,9 +338,6 @@ footer h2 {
   font-size: 1rem;
   line-height: 1.5rem; }
 
-#content-ontop {
-  display: none; }
-
 @keyframes pulse {
   0% {
     transform: scale(0); }
@@ -388,14 +385,11 @@ footer h2 {
 @keyframes traceAppear {
   0% {
     opacity: 0; }
-  70% {
+  80% {
     opacity: 0; }
   100% {
     opacity: 1; } }
 
-#path_circle_vert_clair_erable_2 {
-  animation: traceAppear 2.5s forwards; }
-
 /*!
  * Hamburgers
  * @description Tasty CSS-animated hamburgers
@@ -522,8 +516,7 @@ body {
   body #content-ontop {
     z-index: 3000;
     position: relative;
-    top: -1200px;
-    display: none; }
+    top: -1200px; }
   body #background-animated {
     z-index: 2000;
     position: relative;

web/themes/custom/colloque2024/css-compiled/pages/layout.css

@@ -11,8 +11,7 @@ body {
   body #content-ontop {
     z-index: 3000;
     position: relative;
-    top: -1200px;
-    display: none; }
+    top: -1200px; }
   body #background-animated {
     z-index: 2000;
     position: relative;

web/themes/custom/colloque2024/css/configs/animation.scss

@@ -35,11 +35,11 @@
 
 @keyframes traceAppear {
   0% {opacity: 0;}
-  70%{opacity: 0;}
+  80%{opacity: 0;}
   100% {opacity: 1;}
 }
 #path_circle_vert_clair_erable_2{
-  animation: traceAppear 2.5s forwards;
+  // animation: traceAppear 1s forwards;
 }
 
 

web/themes/custom/colloque2024/css/pages/layout.scss

@@ -13,7 +13,6 @@ body {
  z-index: 3000;
  position: relative;
  top: -1200px;
- display: none;
  }
  
 

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

@@ -164,14 +164,14 @@ 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 duration = 5000; // 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
+            translateX = -35 * 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);
@@ -237,6 +237,31 @@ Array.from(tolefts3).forEach(toleft3 => {
 });
 
 
+let tolefts4 = document.getElementsByClassName('toleft4');
+Array.from(tolefts4).forEach(toleft4 => {
+    function slideLeft() {
+        let translateX = 0; // Position de départ (en bas)
+        let duration = 5000; // 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 = -29 * progress; // -20 est la distance maximale à laquelle vous voulez déplacer l'élément
+            toleft4.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() {
@@ -289,95 +314,20 @@ slideRight(); // 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)
-
+  let translateY = 100; // 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
+    if (translateY > -0) { // 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
-});
-