From e560e5914b491047f7f3e4840610169b13d9db09 Mon Sep 17 00:00:00 2001 From: ouidade Date: Sun, 21 Apr 2024 17:20:52 +0200 Subject: [PATCH] animated background --- .../colloque2024/css-compiled/index.css | 79 ++-- .../css-compiled/pages/layout.css | 5 +- .../colloque2024/css/configs/animation.scss | 87 +---- .../custom/colloque2024/css/pages/layout.scss | 7 +- .../images/fond-ronds-trace-start.svg | 157 ++++++++ .../colloque2024/images/fond-ronds-trace.svg | 18 +- .../custom/colloque2024/js/animation_home.js | 337 +++++++++++++++--- .../template/page--front.html.twig | 177 ++++----- 8 files changed, 564 insertions(+), 303 deletions(-) create mode 100644 web/themes/custom/colloque2024/images/fond-ronds-trace-start.svg diff --git a/web/themes/custom/colloque2024/css-compiled/index.css b/web/themes/custom/colloque2024/css-compiled/index.css index 3a1b4bab..1e4114f3 100644 --- a/web/themes/custom/colloque2024/css-compiled/index.css +++ b/web/themes/custom/colloque2024/css-compiled/index.css @@ -339,15 +339,6 @@ footer h2 { line-height: 1.5rem; } /* Link the SVG file */ -body { - /* background-image: url('../images/fond-ronds.svg'); */ - /* Add other background properties as needed */ - width: 100%; - height: 100vh; - /* Adjust as needed */ - background-size: cover; - /* Adjust as needed */ } - @keyframes pulse { 0% { transform: scale(0); } @@ -356,15 +347,15 @@ body { @keyframes slidein { from { - transform: translateX(20%); } + transform: translateX(0%); } to { - transform: translateX(70%); } } + transform: translateX(100%); } } @keyframes dropDown { from { - transform: translateY(20%); } + transform: translateY(0%); } to { - transform: translateY(70%); } } + transform: translateY(100%); } } @keyframes translateAnimation { 0% { @@ -392,6 +383,23 @@ body { fill: #349a84; /* Final fill color */ } } +@keyframes football-motion { + 0% { + transform: translateX(0) translateY(0); } + 100% { + transform: translateX(100px); } } + +@keyframes traceAppear { + 0% { + opacity: 0; } + 70% { + opacity: 0; } + 100% { + opacity: 1; } } + +#path_circle_vert_clair_erable_2 { + animation: traceAppear 2.5s forwards; } + /* Apply styles to the SVG paths #circle_pop_trans, #circle_pop_trans-2, @@ -401,47 +409,9 @@ body { /* Example animation */ /* animation: pulse 2s infinite alternate; */ /* animation: dropDown 2s infinite alternate; */ - /* animation: pulse 2s infinite alternate; */ } - -#cercle_vert_erable-4-3 { - animation: changeColor2 2s forwards; } - -/* Apply styles to the SVG paths */ -#circle_vert_clair_erable-3-1 { - animation: changeColor 2s forwards; + /* animation: pulse 2s infinite alternate; */ /* animation: slidein 2s infinite alternate; */ } -#circle_orange-7 { - /* animation: changeColor 2s infinite alternate; */ } - -#circle_orange-6 { - /* Main animation for the football */ - /* animation: football-motion 2s linear infinite; */ } - -#circle_orange-6-bis { - /* Trailing effect animation */ - /* animation: trace-motion 2s linear infinite; */ } - -@keyframes football-motion { - 0% { - transform: translateX(0) translateY(0); } - 100% { - transform: translateX(100px); } } - -@keyframes trace-motion { - 0% { - opacity: 0.5; - /* Adjust the opacity to control the visibility of the trace */ - /* Additional properties for the trailing effect */ - transform: translateX(0px) translateY(0); - /* Adjust as needed */ } - 100% { - opacity: 0.3; - /* Make the trace disappear at the end */ - /* Additional properties for the trailing effect */ - transform: translateX(100px); - /* Adjust as needed */ } } - /*! * Hamburgers * @description Tasty CSS-animated hamburgers @@ -582,8 +552,9 @@ body { background-size: content; display: block; position: absolute; - top: 0; - left: 0; } + opacity: 0.5; + top: 100px; + left: +53px; } article.publications, article.interviews { margin-top: 1rem; } diff --git a/web/themes/custom/colloque2024/css-compiled/pages/layout.css b/web/themes/custom/colloque2024/css-compiled/pages/layout.css index a8b47f48..cec0a494 100644 --- a/web/themes/custom/colloque2024/css-compiled/pages/layout.css +++ b/web/themes/custom/colloque2024/css-compiled/pages/layout.css @@ -25,8 +25,9 @@ body { background-size: content; display: block; position: absolute; - top: 0; - left: 0; } + opacity: 0.5; + top: 100px; + left: +53px; } article.publications, article.interviews { margin-top: 1rem; } diff --git a/web/themes/custom/colloque2024/css/configs/animation.scss b/web/themes/custom/colloque2024/css/configs/animation.scss index ea60fa90..ec5ea08b 100644 --- a/web/themes/custom/colloque2024/css/configs/animation.scss +++ b/web/themes/custom/colloque2024/css/configs/animation.scss @@ -1,11 +1,3 @@ -/* Link the SVG file */ -body { - /* background-image: url('../images/fond-ronds.svg'); */ - /* Add other background properties as needed */ - width: 100%; - height: 100vh; /* Adjust as needed */ - background-size: cover; /* Adjust as needed */ -} @keyframes pulse { @@ -15,13 +7,13 @@ body { @keyframes slidein { - from {transform: translateX(20%);} - to {transform: translateX(70%);} + from {transform: translateX(0%);} + to {transform: translateX(100%);} } @keyframes dropDown { - from {transform: translateY(20%);} - to {transform: translateY(70%);} + from {transform: translateY(0%);} + to {transform: translateY(100%);} } @keyframes translateAnimation { @@ -40,72 +32,15 @@ body { 100% {fill: #349a84; /* Final fill color */} } - -/* Apply styles to the SVG paths -#circle_pop_trans, -#circle_pop_trans-2, -/* Add other SVG IDs or classes here */ -#circle_orange{ - /* Add styles to your SVG paths */ - /* Example animation */ - /* animation: pulse 2s infinite alternate; */ - /* animation: dropDown 2s infinite alternate; */ - /* animation: pulse 2s infinite alternate; */ - +@keyframes traceAppear { + 0% {opacity: 0;} + 70%{opacity: 0;} + 100% {opacity: 1;} +} +#path_circle_vert_clair_erable_2{ + animation: traceAppear 2.5s forwards; } -#cercle_vert_erable-4-3{ - animation: changeColor2 2s forwards; -} - -/* Apply styles to the SVG paths */ -#circle_vert_clair_erable-3-1 -{ - animation: changeColor 2s forwards; - /* animation: slidein 2s infinite alternate; */ - -} - -#circle_orange-7{ - /* animation: changeColor 2s infinite alternate; */ -} - - - -#circle_orange-6 { - /* Main animation for the football */ -animation: football-motion 2s linear infinite; -} - -#circle_orange-6-bis { - /* Trailing effect animation */ - filter: url("#blur"); - - animation: trace-motion 2s linear infinite; - filter: url("#blur"); - } - -@keyframes football-motion { - 0% { - transform: translateX(0) translateY(0); - } - 100% { - transform: translateX(100px) ; - } -} - -@keyframes trace-motion { - 0% { - opacity: 0.5; /* Adjust the opacity to control the visibility of the trace */ - /* Additional properties for the trailing effect */ - transform: translateX(0px) translateY(0); /* Adjust as needed */ - } - 100% { - opacity: 0.3; /* Make the trace disappear at the end */ - /* Additional properties for the trailing effect */ - transform: translateX(100px) ; /* Adjust as needed */ - } -} diff --git a/web/themes/custom/colloque2024/css/pages/layout.scss b/web/themes/custom/colloque2024/css/pages/layout.scss index 85cdc729..3892007e 100644 --- a/web/themes/custom/colloque2024/css/pages/layout.scss +++ b/web/themes/custom/colloque2024/css/pages/layout.scss @@ -28,13 +28,14 @@ body { content: " "; width: 100%; height: 100%; - // background-image: url("../images/fond-ronds.svg"); + // background-image: url("../images/fond-ronds-trace.svg"); background-repeat: no-repeat; background-size: content; display: block; position: absolute; - top: 0; - left: 0; + opacity: 0.5; + top: 100px; + left: +53px; } diff --git a/web/themes/custom/colloque2024/images/fond-ronds-trace-start.svg b/web/themes/custom/colloque2024/images/fond-ronds-trace-start.svg new file mode 100644 index 00000000..3b0d5948 --- /dev/null +++ b/web/themes/custom/colloque2024/images/fond-ronds-trace-start.svg @@ -0,0 +1,157 @@ + + + + diff --git a/web/themes/custom/colloque2024/images/fond-ronds-trace.svg b/web/themes/custom/colloque2024/images/fond-ronds-trace.svg index 51daf846..81cd6dc7 100644 --- a/web/themes/custom/colloque2024/images/fond-ronds-trace.svg +++ b/web/themes/custom/colloque2024/images/fond-ronds-trace.svg @@ -36,7 +36,7 @@ cy="74.014618" r="15.890945" /> - + \ No newline at end of file diff --git a/web/themes/custom/colloque2024/js/animation_home.js b/web/themes/custom/colloque2024/js/animation_home.js index 8c79f076..fab13d28 100644 --- a/web/themes/custom/colloque2024/js/animation_home.js +++ b/web/themes/custom/colloque2024/js/animation_home.js @@ -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 -}); diff --git a/web/themes/custom/colloque2024/template/page--front.html.twig b/web/themes/custom/colloque2024/template/page--front.html.twig index bf8d24bf..5e540f97 100644 --- a/web/themes/custom/colloque2024/template/page--front.html.twig +++ b/web/themes/custom/colloque2024/template/page--front.html.twig @@ -82,37 +82,35 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + id="path_circle_vert_clair_erable_2" class="toright2"/> + +