animation aside

web/themes/custom/colloque2024/colloque2024.libraries.yml

@@ -15,5 +15,7 @@ global-scripts:
     js/lightbox.js: {}
     js/script.js: {}
     js/animation_home.js: {}
+    js/animation_aside.js: {}
+
   dependencies:
     - core/jquery

web/themes/custom/colloque2024/css-compiled/configs/animation.css

@@ -0,0 +1,51 @@
+@keyframes pulse {
+  0% {
+    transform: scale(0); }
+  100% {
+    transform: scale(0.5); } }
+
+@keyframes slidein {
+  from {
+    transform: translateX(0%); }
+  to {
+    transform: translateX(100%); } }
+
+@keyframes dropDown {
+  from {
+    transform: translateY(0%); }
+  to {
+    transform: translateY(100%); } }
+
+@keyframes translateAnimation {
+  0% {
+    transform: translateX(0);
+    /* Start translation */ }
+  50% {
+    transform: translateX(200); }
+  100% {
+    transform: translateX(500px);
+    /* End translation */ } }
+
+@keyframes changeColor {
+  0% {
+    fill: #b9ce00;
+    /* Initial fill color */ }
+  100% {
+    fill: #ff804d;
+    /* Final fill color */ } }
+
+@keyframes changeColor2 {
+  0% {
+    fill: #038788;
+    /* Initial fill color */ }
+  100% {
+    fill: #349a84;
+    /* Final fill color */ } }
+
+@keyframes traceAppear {
+  0% {
+    opacity: 0; }
+  80% {
+    opacity: 0; }
+  100% {
+    opacity: 1; } }

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

@@ -715,6 +715,7 @@ header #block-colloque2024-mainnavigation ul li {
     z-index: -1;
     position: absolute;
     width: 25%;
+    top: 0;
     left: 0;
     margin: auto;
     padding: auto; }

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

@@ -43,4 +43,3 @@
 }
 
 
-

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

@@ -35,12 +35,18 @@
     z-index: -1;
     position: absolute;
     width: 25%;
+    top: 0;
     left: 0;
     margin: auto;
     padding: auto;
     svg{
       margin: auto;
     }
+
+  
+  
+  
+  
   }
 
 }

web/themes/custom/colloque2024/js/animation-aside.js

@@ -1,21 +0,0 @@
-let dropdowns1 = document.getElementById('circle_vert_clair_erable_3');
-
- 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.3); // Limite la progression à 0.3 (pour éviter un dépassement)
-    translateY = 410 * progress * (0.48 - progress); // Réduction de la vitesse vers la fin de l'animation
-    dropdown1.style.transform = `translateY(${translateY}%)`; // Appliquer la transformation
-    if (progress < 0.999999) {
-        requestAnimationFrame(animate);
-    }
-}
-requestAnimationFrame(animate);
-}
-slideDown(); // Lancer l'animation lorsque la page est chargée
-
-

web/themes/custom/colloque2024/js/animation_aside.js

@@ -0,0 +1,107 @@
+
+
+
+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
+// });

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

@@ -3,32 +3,6 @@
 // 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}%)`; // Appliquer la transformation
-          
-//     // dropdown.setAttribute('transform', `translate(0, ${translateY})`); // Appliquer la transformation
-
-//     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 => {

web/themes/custom/colloque2024/template/page--front.html.twig

@@ -67,7 +67,7 @@
         <svg
           width="1900"
           height="1500"
-          viewBox="0 0 502.70834 396.875"
+          viewBox="0 0 502.70834 296.875"
           version="1.1"
           id="svg1"
           xml:space="preserve"