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

animation aside

Browse Source
This commit is contained in:
ouidade
2024-04-26 17:23:30 +02:00
parent 5c16ff54b3
commit ac8c323805
12 changed files with 413 additions and 201 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/themes/custom/colloque2024/js/animation-aside.js
-21
View File
@@ -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
+107
View File
@@ -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
-26
View File
@@ -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 => {