diff --git a/web/themes/custom/colloque2024/js/animation_home.js b/web/themes/custom/colloque2024/js/animation_home.js
index 86e68d8e..ec406bdc 100644
--- a/web/themes/custom/colloque2024/js/animation_home.js
+++ b/web/themes/custom/colloque2024/js/animation_home.js
@@ -34,21 +34,17 @@ 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 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 à 1 (pour éviter un dépassement)
- progress = easeInOut(progress);
- translateY = 65 * progress; // Déplacement d'un pixel vers le haut à chaque itération
+ 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.8) {
- requestAnimationFrame(animate);
+ if (progress < 0.999999) {
+ requestAnimationFrame(animate);
}
- }
- function easeInOut(t) {
- return t < 0.5 ? 4 * t * t : -1 + (10 - 2 * t) * t;
}
requestAnimationFrame(animate);
}
@@ -60,22 +56,18 @@ 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 duration = 20000; // 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
+ translateY = 280 * progress * (1 - progress); // Déplacement d'un pixel vers le haut à chaque itération
dropdown2.style.transform = `translateY(${translateY}%)`; // Appliquer la transformation
- if (progress < 0.8) {
+ if (progress < 0.999) {
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
@@ -86,22 +78,18 @@ 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 duration = 18000; // 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
+ translateY = 235 * progress * (1 - 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
@@ -112,22 +100,18 @@ 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 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, 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
+ translateY = 335 * progress * (1 - 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
@@ -138,51 +122,43 @@ 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);
+ let translateY = 0; // Position de départ (en bas)
+ let duration = 10000; // 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)
+ translateY = 200 * progress * (1 - 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);
+ }
}
+ 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
+ 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 = 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 = -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);
- }
- }
- 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
+ function slideLeft() {
+ let translateX = 0; // Position de départ (en bas)
+ let duration = 10000; // 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)
+ translateX = -100 * progress * (1 - 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);
+ }
+ }
+ requestAnimationFrame(animate);
+ }
+ slideLeft(); // Lancer l'animation lorsque la page est chargée
});
@@ -196,16 +172,12 @@ Array.from(tolefts2).forEach(toleft2 => {
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 = -32 * progress * (1 - 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
@@ -221,16 +193,12 @@ Array.from(tolefts3).forEach(toleft3 => {
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
+ translateX = -45 * progress * (1 - 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
@@ -241,22 +209,18 @@ 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 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.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
+ translateX = -110 * progress * (0.90 - 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
@@ -266,18 +230,24 @@ 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
+ let duration = 13000; // 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)
+ translateX = 135 * progress * (0.99 - progress); // 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
+ if (progress < 0.8) { // Limite la hauteur à laquelle la forme doit être animée
requestAnimationFrame(animate); // Appel récursif de la fonction animate
}
}
- animate(); // Lancer l'animation
+ requestAnimationFrame(animate);
}
slideRight(); // Lancer l'animation lorsque la page est chargée
});
+
let torights2 = document.getElementsByClassName('toright2');
Array.from(torights2).forEach(toright2 => {
function slideRight() {
@@ -297,18 +267,22 @@ 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() {
+ function slideRight(timestamp) {
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
+ let duration = 13000; // 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)
+ translateX = 240 * progress * (0.98 - progress); // 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
+ if (progress < 0.8) { // Limite la hauteur à laquelle la forme doit être animée
requestAnimationFrame(animate); // Appel récursif de la fonction animate
}
}
- animate(); // Lancer l'animation
+ requestAnimationFrame(animate);
}
slideRight(); // Lancer l'animation lorsque la page est chargée
});
@@ -317,17 +291,22 @@ slideRight(); // 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 = 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 > -0) { // Limite la hauteur à laquelle la forme doit être animée
- requestAnimationFrame(animate); // Appel récursif de la fonction animate
+ 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 * (1 - 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);
+ }
}
- }
- animate(); // Lancer l'animation
-}
+ requestAnimationFrame(animate);
+ }
slideUp(); // Lancer l'animation lorsque la page est chargée
});
diff --git a/web/themes/custom/colloque2024/template/page--front.html.twig b/web/themes/custom/colloque2024/template/page--front.html.twig
index 13a8e58e..9fd06db8 100644
--- a/web/themes/custom/colloque2024/template/page--front.html.twig
+++ b/web/themes/custom/colloque2024/template/page--front.html.twig
@@ -84,10 +84,7 @@
id="layer1"
transform="translate(-51.525162,-32.699875)">
+ id="circle_orange" cx="84.683075" cy="132.53793" r="15.890945" />
+
+
+
+
@@ -141,9 +135,9 @@
d="m 176.96306,228.27149 c 0.28713,-1.66598 0.86969,-3.23411 2.10196,-4.64922 0.98738,-1.13386 2.20392,-2.12354 3.70487,-2.87043 6.97221,-3.4694 16.7678,-1.26697 19.76085,4.79211 0.78557,1.59028 0.9903,3.27791 0.75119,4.95918 -0.36348,2.5558 -2.61938,4.53937 -3.35343,7.00485 -1.73601,5.83082 -2.62133,11.8178 -4.2762,17.66708 -0.65342,2.30955 -2.18477,5.79646 -5.66198,6.29444 -3.93982,0.56424 -5.83643,-3.36487 -6.56082,-5.67454 -0.58593,-1.8682 -0.59903,-3.8034 -0.83564,-5.70307 -0.51428,-4.12917 -0.76337,-8.33141 -1.93444,-12.39795 -0.47645,-1.6545 -1.74598,-2.95288 -2.65106,-4.46326 -0.88579,-1.47815 -1.32445,-3.33945 -1.0453,-4.95919 z"
id="path_circle_vert_erable_4" class="moveup"/>
+ id="circle_vert_clair_erable_6" class="dropdown2" cx="138.32957" cy="-20.208164" r="15.890945" />
+
+
-
-
-
-
-
-
-