123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383 |
- // 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 => {
- 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
- }
- 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);
- // Parcourir tous les éléments sélectionnés
- Array.from(moveups).forEach(moveup => {
- function slideUp() {
- let translateY = 0; // 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
- 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
- });
|