kevin/Popsu-coloque
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

animated background

Browse Source
This commit is contained in:
ouidade
2024-04-21 21:14:02 +02:00
parent 7c908b6bf4
commit d8c5cb99aa
6 changed files with 42 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/themes/custom/colloque2024/css-compiled/index.css
+2 -9
View File
@@ -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
+1 -2
View File
@@ -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
+2 -2
View File
@@ -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
-1
View File
@@ -13,7 +13,6 @@ body {
z-index: 3000;
position: relative;
top: -1200px;
display: none;
}
web/themes/custom/colloque2024/js/animation_home.js
+29 -79
View File
@@ -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
});
web/themes/custom/colloque2024/template/page--front.html.twig
+8 -7
View File
@@ -136,7 +136,10 @@
<circle style="fill:#038788;fill-opacity:1;stroke:none;stroke-width:0.0232253;paint-order:fill markers stroke"
id="circle_vert_erable_4" cx="190.17583" cy="216.84201" r="15.890945" />
id="circle_vert_erable_4" class="moveup" cx="190.17583" cy="216.84201" r="15.890945" />
<path style="filter:url(#f5);fill:#038788;stroke:none;stroke-width:0.837592"
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"/>
<circle style="fill:#b9ce00;fill-opacity:1;stroke:none;stroke-width:0.0232253;paint-order:fill markers stroke"
id="circle_vert_clair_erable_6" class="dropdown2" cx="139.32957" cy="44.208164" r="15.890945" />
<path style="filter:url(#f5);fill:#b9ce00;fill-opacity:1;stroke:none"
@@ -144,7 +147,7 @@
id="path_circle_vert_clair_erable_6" class="dropdown2" />
<circle style="fill:#b9ce00;fill-opacity:1;stroke:none;stroke-width:0.0322974;paint-order:fill markers stroke"
id="circle_vert_clair_erable_7" class="dropdown4" cx="91.831978" cy="60" r="22.098158" />
id="circle_vert_clair_erable_7" class="dropdown4" cx="92.832" cy="60" r="22.098158" />
<path style="filter:url(#f5);fill:#b9ce00;fill-opacity:1;stroke:none;stroke-width:1.53571"
d="m 91.317542,30 c -25.690903,2.28569 -22.201624,41.93132 3.380606,39.65534 25.690922,-2.28568 22.201612,-41.93136 -3.380606,-39.65534 z"
id="path_circle_vert_clair_erable_7" class="dropdown4"/>
@@ -173,9 +176,7 @@
<path style="filter:url(#f5);fill:#038788;fill-opacity:1;stroke:none;stroke-width:1.19737"
d="m 193.12822,-20 c -20.03075,1.78212 -17.31022,32.693118 2.6358,30.918578 20.03076,-1.7821 17.31021,-32.693148 -2.6358,-30.918578 z"
id="path_circle_vert_erable" class="dropdown1" />
<path style="filter:url(#f5);fill:#038788;stroke:none;stroke-width:0.837592"
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" />
<path style="filter:url(#f5);fill:#b9ce00;fill-opacity:1;stroke:none"
@@ -188,8 +189,8 @@
<path style="filter:url(#f5);fill:#b9ce00;fill-opacity:1;stroke:none;stroke-width:1.19737"
d="m 347.31799,59.013158 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="toright2"/>
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"/>
<circle style="fill:#349a84;fill-opacity:1;stroke:none;stroke-width:0.0232253;paint-order:fill markers stroke"
id="circle_pop_trans_2" class="toright1" cx="200" cy="74.286247" r="15.890945" />