|
|
@@ -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
|
|
|
-});
|
|
|
-
|
