|
|
@@ -3,32 +3,300 @@
|
|
|
// 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 < 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
|
|
|
+});
|
|
|
+
|
|
|
|
|
|
- if (translateY < 200) { // Limite la hauteur à laquelle la forme doit être animé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
|
|
|
+}
|
|
|
+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
|
|
|
+});
|
|
|
|
|
|
-slideDown(); // 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
|
|
|
-});
|
