diff --git a/web/themes/custom/colloque2024/css-compiled/index.css b/web/themes/custom/colloque2024/css-compiled/index.css index d9b5843c..1d43c45e 100644 --- a/web/themes/custom/colloque2024/css-compiled/index.css +++ b/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; diff --git a/web/themes/custom/colloque2024/css-compiled/pages/layout.css b/web/themes/custom/colloque2024/css-compiled/pages/layout.css index 60dca748..cec0a494 100644 --- a/web/themes/custom/colloque2024/css-compiled/pages/layout.css +++ b/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; diff --git a/web/themes/custom/colloque2024/css/configs/animation.scss b/web/themes/custom/colloque2024/css/configs/animation.scss index ec5ea08b..3dba4774 100644 --- a/web/themes/custom/colloque2024/css/configs/animation.scss +++ b/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; } diff --git a/web/themes/custom/colloque2024/css/pages/layout.scss b/web/themes/custom/colloque2024/css/pages/layout.scss index 17d0fff6..3892007e 100644 --- a/web/themes/custom/colloque2024/css/pages/layout.scss +++ b/web/themes/custom/colloque2024/css/pages/layout.scss @@ -13,7 +13,6 @@ body { z-index: 3000; position: relative; top: -1200px; - display: none; } diff --git a/web/themes/custom/colloque2024/js/animation_home.js b/web/themes/custom/colloque2024/js/animation_home.js index 25cd9640..86e68d8e 100644 --- a/web/themes/custom/colloque2024/js/animation_home.js +++ b/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 -}); - diff --git a/web/themes/custom/colloque2024/template/page--front.html.twig b/web/themes/custom/colloque2024/template/page--front.html.twig index a31da4a8..13a8e58e 100644 --- a/web/themes/custom/colloque2024/template/page--front.html.twig +++ b/web/themes/custom/colloque2024/template/page--front.html.twig @@ -136,7 +136,10 @@ + id="circle_vert_erable_4" class="moveup" cx="190.17583" cy="216.84201" r="15.890945" /> + + id="circle_vert_clair_erable_7" class="dropdown4" cx="92.832" cy="60" r="22.098158" /> @@ -173,9 +176,7 @@ - + + d="m 462.8305,58.142036 c -20.03075,1.78212 -17.31022,32.693116 2.6358,30.918576 20.03076,-1.7821 17.31021,-32.693146 -2.6358,-30.918576 z" + id="path_circle_vert_clair_erable_2" class="toleft4"/>