Discussion :

[jeicko]

Bonjour à tous,

J'ai fait un site pour aider les futurs parents à trouver une idée de prénom pour leur bébé, j'aimerais ajouter sur ce site une petite animation..

L'idée serait de proposer au hasard 3 faire-part de naissance différents (que j'aurais crée) en téléchargement.
Voici ce que j'ai fait en HTML/CSS :



Dans l'idée, les tétines se mélangeraient pour laisser place à une seule des 3 tétines avec le lien correspondant

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
<div class="hasard-choix">
            <a href="images/test1.pdf" download>
              <img src="images/tetine.png" alt="tetine" height="45px" width="45px">
            </a>
            <a href="images/test2.pdf" download>
              <img src="images/tetine.png" alt="tetine" height="45px" width="45px">
            </a>
            <a href="images/test3.pdf" download>
              <img src="images/tetine.png" alt="tetine" height="45px" width="45px">
            </a>
          </div>

Vous pensez que c'est réalisable en JS ? Et si ça l'est, auriez-vous un tutoriel de ce type sous la main ? (Je précise que j'ai un niveau débutant)

[SpaceFrog]

les tétines se mélangeraient

Un animation de mélange est faisable mais relativement complexe.

Plus simplement tu pourrais faire clignoter alternativement les tétines et les faire disparaitre sauf une au hasard au bout de 3 secondes...

utilises tu JQuery ou JS pur ?

[jeicko]

Salut, merci pour ta réponse.

Si je dois utiliser JQuery, j'ai la version v3.6.0 associée à mon site

[SpaceFrog]

A click sur le bouton laisser faire le hasard il suffit de lancer un clignotement alternatif des 3 tétines puis de lancer un setTimeout pour la fin du clignotement.
A la fin du clignotement tu génères un nombre aléatoire entre 0 et 2 et tu masques les tétines en fonction du nombre aléatoire pour n'en conserver qu'une ...

[jeicko]

Tu n’aurais pas un tutoriel qui explique tout cela avec du code ? Je ne connais pas les bases du JS, je ne suis pas capable de faire ce que tu me dis. Mais je te remercie de m’avoir aiguillé sur la façon de faire.

[jeicko]

Je n'ai toujours pas trouvé de tutoriel à ma porté qui pourrait me permettre de mettre en place cette animation, je suis toujours preneur si quelqu'un veut bien m'aider.

Bonne journée

[Loralina]

Bonsoir,
J'ai fait un petit carrousel 3D en js pur.
C'est au stade du brouillon, mais quand je teste, ça marche.
Le téléchargement est proposé par le navigateur à la fin de l'animation.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<style>
.hasard-choix
        {
        text-align:center;
        }
.hasard-choix a
        {
        position:relative;
        }
.hasard-choix a img
        {
        position:absolute;
        }
</style>
<br><br><br><br><br>
<div class="hasard-choix">
	<a href="#">
		<img src="images/tetine.png" alt="tetine" height="45px" width="45px">
		<img src="images/tetine.png" alt="tetine" height="45px" width="45px">
		<img src="images/tetine.png" alt="tetine" height="45px" width="45px">
	</a>
</div>
<script>
const ar_liens=[
        "images/test1.pdf",
        "images/test2.pdf",
        "images/test3.pdf"];
 
let rayon=90;
const espaceInit=rayon;
const tailleInit=45;
const coef3D=150;
 
let angleRotationY=0;
let vitesseRotationY=0.1;
 
const ob_cont=document.querySelector(".hasard-choix");
const ob_lien=ob_cont.querySelector("a");
const nl_images=ob_cont.querySelectorAll("img");
 
for(let i=nl_images.length-1;i>=0;i--)
        {
        const lien=ar_liens[i];
        nl_images[i].style.left=(i-1)*espaceInit+"px";
        nl_images[i].onclick=function()
                {
                for(const ob_image of nl_images)
                        {
                        ob_image.onclick=null;
                        }
                const idAnim=setInterval(function()
                        {
                        const ar_images=[];
 
                        if((rayon-=1.5)<=0)
                                {
                                clearInterval(idAnim);
                                for(let i=nl_images.length-1;i>=1;i--)
                                        {
                                        nl_images[i].style.display="none";
                                        }
                                rayon=0;
                                ob_lien.href=lien;
                                ob_lien.download=lien.substr(lien.lastIndexOf("/")+1);
                                ob_lien.click();
                                }
 
                        angleRotationY+=(vitesseRotationY+=(0.3-vitesseRotationY)*0.1);
                        for(let i=nl_images.length-1;i>=0;i--)
                                {
                                const angle=angleRotationY+i*Math.PI*2/nl_images.length;
                                const x=rayon*Math.cos(angle);
                                const z=rayon*Math.sin(angle);
                                const echelle=coef3D/(coef3D+z);
                                const ob_image=nl_images[i];
                                ob_image.style.width=tailleInit*echelle+"px";
                                ob_image.style.height=tailleInit*echelle+"px";
                                ob_image.style.left=x*echelle+"px";
                                ob_image.style.top=tailleInit*0.5*(1-echelle)+"px";
                                ar_images[i]={ob_image:ob_image,z:z};
                                }
                        ar_images.sort(function(a,b){return 1-2*Number(a.z>b.z)});
                        for(let i=ar_images.length-1;i>=0;i--)
                                {
                                ar_images[i].ob_image.style.zIndex=i;
                                }
                        },30);
                };
        }
</script>

24/5 19h05 : Petites retouches en passant : suppression d'un console.log, suppression des événements de clic des images après clic sur l'une d'elle, et tri sur z (pareil, mais plus courant).

[jeicko]

Salut Loralina,

Un grand merci pour tout le travail que tu as fourni pour me venir en aide. L’animation en elle même est parfaite. Je l’ai testé sur une page vierge, c’est top !

Cependant, mon site est un site one page avec un système en JS qui cache et decache mes rubriques. L’animation n’est pas fluide une fois mis en place, ça rame. D’ailleurs j’ai du mal à l’intégrer sans tout faire bug car mon site est basé sur un système d’ancrage..

Je suis en train de me dire que je ne pourrais pas intégrer ce que je souhaitais..
L’idée de Spacefrog était peut-être plus adaptée à mon site au final..

Je suis un peu gêné car tu m’as proposé un code prêt à l’emploi alors que je demandais juste un tuto. Et je t’en remercie, c’est vraiment sympa de ta part. Je garde ton travail sous la main.

[Loralina]

Bonjour jeicko,
Pas de souci, c'était amusant à faire et ça peut en intéresser d'autres.
Pour moi, c'était plus rapide à faire que d'aller te chercher des liens et tutoriels pour ensuite expliquer par quel bout le prendre.

Quand je teste mon code :
Sous Firefox, c'est fluide.
Sous Edge et Chrome, c'est plus rapide, mais saccadé.

J'ai fait une variante :
window.requestAnimationFrame à la place de setInterval.
vitesses basées sur le temps écoulé.

Ainsi, le résultat est fluide et identique sur les trois navigateurs !

Si tu veux, tu pourras tester ce nouveau code, ce sera peut-être légèrement mieux.
Cependant, il est possible que ça tourne de nouveau au ralenti dans ton projet...

Bon, je t'ai fait aussi une version alternative avec clignotement aléatoire.
A la fin, c'est l'image cliquée qui reste affichée, mais il suffit d'une petite modification pour que ce soit l'image du milieu, si tu préfères.
Ce n'est pas le même principe que ce que disait SpaceFrog, mais bon c'est adaptable...
Même si ce n'est pas tout à fait ce que tu veux, tu pourras déjà voir si ce genre de clignotement peut convenir.

J'ai trouvé cette version avec clignotement plus difficile à faire que celle du carrousel, parce que j'ai voulu faire un aléatoire équilibré (genre ça ne doit pas faire 1 puis 2 puis 1 puis 2 puis 3, ça ne rendrait pas bien).

Je reprécise bien que ces codes que je mets sont très brouillons. C'est peu paramétré, il peut y avoir des petites erreurs etc.

Carrousel :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<style>
.hasard-choix
        {
        text-align:center;
        }
.hasard-choix a
        {
        position:relative;
        }
.hasard-choix a img
        {
        position:absolute;
        }
</style>
<br><br><br><br><br>
<div class="hasard-choix">
	<a href="#">
		<img src="images/tetine.png" alt="tetine" height="45px" width="45px">
		<img src="images/tetine.png" alt="tetine" height="45px" width="45px">
		<img src="images/tetine.png" alt="tetine" height="45px" width="45px">
	</a>
</div>
<script>
const ar_liens=[
        "images/test1.pdf",
        "images/test2.pdf",
        "images/test3.pdf"];
 
let rayon=90;
const rayonInit=rayon;
const espaceInit=rayon;
const tailleInit=45;
const coef3D=150;
 
let angleRotationY=0;
const dureeRafrRef=1000/25;
 
const ob_cont=document.querySelector(".hasard-choix");
const ob_lien=ob_cont.querySelector("a");
const nl_images=ob_cont.querySelectorAll("img");
 
for(let i=nl_images.length-1;i>=0;i--)
        {
        const lien=ar_liens[i];
        nl_images[i].style.left=(i-1)*espaceInit+"px";
        nl_images[i].onclick=function()
                {
                for(const ob_image of nl_images)
                        {
                        ob_image.onclick=null;
                        }
                window.requestAnimationFrame(function animation()
                        {
                        const ar_images=[];
 
                        const tempEcouleNouv=performance.now();
                        const dureeRafr=Math.min(tempEcouleNouv-tempsEcoule,dureeRafrRef);
                        tempsEcoule=tempEcouleNouv;
 
                        if((rayon-=1.5*dureeRafr/dureeRafrRef)<=0)
                                {
                                for(let i=nl_images.length-1;i>=1;i--)
                                        {
                                        nl_images[i].style.display="none";
                                        }
                                rayon=0;
                                ob_lien.href=lien;
                                ob_lien.download=lien.substr(lien.lastIndexOf("/")+1);
                                ob_lien.click();
                                }
 
                        angleRotationY+=0.3-0.2*rayon/rayonInit;
                        for(let i=nl_images.length-1;i>=0;i--)
                                {
                                const angle=angleRotationY+i*Math.PI*2/nl_images.length;
                                const x=rayon*Math.cos(angle);
                                const z=rayon*Math.sin(angle);
                                const echelle=coef3D/(coef3D+z);
                                const ob_image=nl_images[i];
                                ob_image.style.width=tailleInit*echelle+"px";
                                ob_image.style.height=tailleInit*echelle+"px";
                                ob_image.style.left=x*echelle+"px";
                                ob_image.style.top=tailleInit*0.5*(1-echelle)+"px";
                                ar_images[i]={ob_image:ob_image,z:z};
                                }
                        ar_images.sort(function(a,b){return 1-2*Number(a.z>b.z)});
                        for(let i=ar_images.length-1;i>=0;i--)
                                {
                                ar_images[i].ob_image.style.zIndex=i;
                                }
 
                        if(rayon>0)
                                {
                                window.requestAnimationFrame(animation);
                                }
                        });
 
                let tempsEcoule=performance.now();
                };
        }
</script>

Clignotement aléatoire :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
<style>
.hasard-choix
        {
        text-align:center;
        }
</style>
<br><br><br><br><br>
<div class="hasard-choix">
	<a href="#">
		<img src="images/tetine.png" alt="tetine" height="45px" width="45px">
		<img src="images/tetine.png" alt="tetine" height="45px" width="45px">
		<img src="images/tetine.png" alt="tetine" height="45px" width="45px">
	</a>
</div>
<script>
function melanger(tableau)
        {
        for(let i=tableau.length-1;i>0;i--)
                {
                const j=Math.floor(Math.random()*(i+1));
                const element=tableau[i];
                tableau[i]=tableau[j];
                tableau[j]=element;
                }
        }
 
const ar_liens=[
        "images/test1.pdf",
        "images/test2.pdf",
        "images/test3.pdf"];
 
const dureeRafrRef=1000/25;
let nombClig=10;
const ob_cont=document.querySelector(".hasard-choix");
const ob_lien=ob_cont.querySelector("a");
const nl_images=ob_cont.querySelectorAll("img");
const ar_ordreIndexClig=[];
 
for(let i=nl_images.length-1;i>=0;i--)
        {
        ar_ordreIndexClig[i]=i;
        const index=i;
        nl_images[i].onclick=function()
                {
                for(const ob_image of nl_images)
                        {
                        ob_image.onclick=null;
                        }
 
                let compteur=0;
                let decalage=0;
                melanger(ar_ordreIndexClig);
                while(ar_ordreIndexClig[decalage]!==index)
                        {
                        decalage++;
                        }
 
                let delai=0;
                const ob_imageClic=this;
                let ob_imageClig=null;
 
                window.requestAnimationFrame(function animation()
                        {
                        const tempEcouleNouv=performance.now();
                        const dureeRafr=Math.min(tempEcouleNouv-tempsEcoule,dureeRafrRef);
                        tempsEcoule=tempEcouleNouv;
 
                        if((delai-=dureeRafr)<=0)
                                {
                                if(--nombClig>0 && ob_imageClig!==null)
                                        {
                                        ob_imageClig.style.visibility="";
                                        }
                                let i=ar_ordreIndexClig[(compteur+decalage)%ar_ordreIndexClig.length];
//algorithme à vérifier ici :
                                if(nombClig<=0 && nl_images[i].style.visibility==="hidden")
                                        {
                                        compteur++;
                                        i=ar_ordreIndexClig[(compteur+decalage)%ar_ordreIndexClig.length];
                                        }
                                (ob_imageClig=nl_images[i]).style.visibility="hidden";
                                if(++compteur>=ar_ordreIndexClig.length)
                                        {
                                        compteur=0;
                                        melanger(ar_ordreIndexClig);
                                        decalage=Number(ar_ordreIndexClig[0]===i);
                                        }
                                delai=2*dureeRafrRef;
                                }
 
                        for(const ob_image of nl_images)
                                {
                                if(ob_image.style.visibility!=="hidden")
                                        {
                                        window.requestAnimationFrame(animation);
                                        return;
                                        }
                                }
 
                        ob_imageClic.style.visibility="";
 
                        const lien=ar_liens[index];
                        ob_lien.href=lien;
                        ob_lien.download=lien.substr(lien.lastIndexOf("/")+1);
                        ob_lien.click();
                        });
 
                let tempsEcoule=performance.now();
                };
        }
</script>

18h00 : 2 petites retouches...
A noter ici : if(nombClig<=0 && nl_images[i].style.visibility==="hidden"), il faudrait que je réfléchisse plus en détail à ce cas que j'ai envisagé pour voir si je l'ai bien traité.

[NoSmoking]

Bonjour,
encore une bien belle démo

J'ai fait une variante :
window.requestAnimationFrame à la place de setInterval.

Cela s'impose comme une évidence dans ce cas.


Concernant la fluidité, peut-être devrais tu passer par des transformations, mieux gérés pour le rendu par les navigateurs, je pense surtout à cette partie

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
ob_image.style.width=tailleInit*echelle+"px";
ob_image.style.height=tailleInit*echelle+"px";
ob_image.style.left=x*echelle+"px";
ob_image.style.top=tailleInit*0.5*(1-echelle)+"px";

au lieu de jouer sur la taille, height/width, jouer avec scale() et pour la position, left/top, jouer avec transalteXY.

[jeicko]

Salut,

Une nouvelle fois merci pour ton travail. =)

Au final, l’animation qui semble la plus adaptée à mon site est celle du clignotement, niveau design aussi, elle s’intègre parfaitement à mon site.
Et je trouve l’idée même mieux que celle de Spacefrog car le clic s’effectue directement sur les tétines.
Le point que je vais essayer d’améliorer c’est effectivement l’affichage de la tétine au milieu en fin d’animation pour pinailler un peu..

Du coup j’essaie de l’intégrer complètement, mais il y a un point où je bloque. Tu utilises un «#» , que j’utilise également dans mon site ( qui me permet de revenir à la page d’accueil après avoir fermé les fenêtres des rubriques ) j’ai du mal à comprendre comment mettre un ID unique dans ton code pour éviter qu’après le clique sur l’animation, la rubrique se ferme en même temps que l’animation.

Dsl je n’ai pas un grand niveau en JS

[Loralina]

Bonjour,
Merci NoSmoking pour l'appréciation et les remarques.
Je n'ai pas testé, mais j'ai pris note.
En allant voir scale, j'ai vu qu'il y avait tout plein de trucs en 3D en fait ! Miam, miam !
Il faudra que je trouve le temps d'aller voir ça à l'occasion.

jeicko, oui c'est vrai, il faut ajouter un truc pour le #.
Il y a des variantes possibles sinon, dont créer le lien par code, mais bon, je vais rester sur l'idée initiale.

Je t'ai mis l'image du milieu affichée à la fin et j'ai remanié un petit passage.
Il y a un peu beaucoup de bricolage dans l'ensemble, ça mériterait une réflexion plus poussée.

Voilà la version avec tes deux soucis corrigés :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
<style>
.hasard-choix
        {
        text-align:center;
        }
</style>
<br><br><br><br><br>
<div class="hasard-choix">
	<a href="#" onclick="return false;">
		<img src="images/tetine.png" alt="tetine" height="45px" width="45px">
		<img src="images/tetine.png" alt="tetine" height="45px" width="45px">
		<img src="images/tetine.png" alt="tetine" height="45px" width="45px">
	</a>
</div>
<script>
function melanger(tableau)
        {
        for(let i=tableau.length-1;i>0;i--)
                {
                const j=Math.floor(Math.random()*(i+1));
                const element=tableau[i];
                tableau[i]=tableau[j];
                tableau[j]=element;
                }
        }
 
const ar_liens=[
        "images/test1.pdf",
        "images/test2.pdf",
        "images/test3.pdf"];
 
const dureeRafrRef=1000/25;
let nombClig=10;
const ob_cont=document.querySelector(".hasard-choix");
const ob_lien=ob_cont.querySelector("a");
const nl_images=ob_cont.querySelectorAll("img");
const ar_ordreIndexClig=[];
 
for(let i=nl_images.length-1;i>=0;i--)
        {
        ar_ordreIndexClig[i]=i;
        const index=i;
        nl_images[i].onclick=function()
                {
                for(const ob_image of nl_images)
                        {
                        ob_image.onclick=null;
                        }
 
                let compteur=0;
                let decalage=0;
                melanger(ar_ordreIndexClig);
                while(ar_ordreIndexClig[decalage]!==index)
                        {
                        decalage++;
                        }
 
                let delai=0;
                const ob_imageClic=this;
                let ob_imageClig=null;
 
                window.requestAnimationFrame(function animation()
                        {
                        const tempEcouleNouv=performance.now();
                        const dureeRafr=Math.min(tempEcouleNouv-tempsEcoule,dureeRafrRef);
                        tempsEcoule=tempEcouleNouv;
 
                        if((delai-=dureeRafr)<=0)
                                        {
                                        if(nombClig>0)
                                                {
                                                nombClig--;
                                                if(ob_imageClig!==null)
                                                        {
                                                        ob_imageClig.style.visibility="";
                                                        }
                                                }
                                        let i=ar_ordreIndexClig[(compteur+decalage)%ar_ordreIndexClig.length];
                                        if(nombClig===0)
                                                {
                                                while(nl_images[i].style.visibility==="hidden")
                                                        {
                                                        compteur++;
                                                        i=ar_ordreIndexClig[(compteur+decalage)%ar_ordreIndexClig.length];
                                                        }
                                                }
                                        (ob_imageClig=nl_images[i]).style.visibility="hidden";
                                        if(++compteur>=ar_ordreIndexClig.length)
                                                {
                                                compteur=0;
                                                melanger(ar_ordreIndexClig);
                                                decalage=Number(ar_ordreIndexClig[0]===i);
                                                }
                                        delai=2*dureeRafrRef;
                                        }
 
                                for(const ob_image of nl_images)
                                        {
                                        if(ob_image.style.visibility!=="hidden")
                                                {
                                                window.requestAnimationFrame(animation);
                                                return;
                                                }
                                        }
 
                                nl_images[(nl_images.length-1)*0.5].style.visibility="";
 
                                const lien=ar_liens[index];
                                ob_lien.href=lien;
                                ob_lien.onclick=null;
                                ob_lien.download=lien.substr(lien.lastIndexOf("/")+1);
                                ob_lien.click();
                                });
 
                let tempsEcoule=performance.now();
                };
        }
</script>

[jeicko]

C’est parfait, un grand merci à toi

[jeicko]

Bonjour à tous,

J'ouvre à nouveau le sujet car je rencontre un petit problème..

Le code a évolué pour s'intégrer à mon site. J'avais besoin de pouvoir utiliser l'animation 2 fois sur la même page car j'ai un article pour Fille et un article pour Garçon, avec au total 6 liens de téléchargement.

Mon problème : L'animation fonctionne correctement une premiere fois, mais à la 2nd, l'animation ne se déroule pas entièrement. Comme si la premiere moitié de l'animation était ignorée. Si quelqu'un a une idée.

J'ai fait un Codepen : https://codepen.io/jeicko/pen/dyvVjYN

Nouveau code JS :

Code JS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
function melanger(tableau) {
        for (let i = tableau.length - 1; i > 0; i--) {
          const j = Math.floor(Math.random() * (i + 1));
          const element = tableau[i];
          tableau[i] = tableau[j];
          tableau[j] = element;
        }
      }
 
      const ar_liens = ["images/test1.zip", "images/test2.zip", "images/test3.zip"];
      const ar_liens2 = ["images/test4.zip", "images/test5.zip", "images/test6.zip"];
 
      const dureeRafrRef = 1000 / 25;
      let nombClig = 10;
 
      function groupe(liens, parent) {
        const ob_cont = document.querySelector(parent);
        const ob_lien = ob_cont.querySelector("a");
        const nl_images = ob_cont.querySelectorAll("svg");
 
        const ar_ordreIndexClig = [];
 
        for (let i = nl_images.length - 1; i >= 0; i--) {
          ar_ordreIndexClig[i] = i;
          const index = i;
          nl_images[i].onclick = function () {
            for (const ob_image of nl_images) {
              ob_image.onclick = null;
            }
 
            let compteur = 0;
            let decalage = 0;
            melanger(ar_ordreIndexClig);
            while (ar_ordreIndexClig[decalage] !== index) {
              decalage++;
            }
 
            let delai = 0;
            const ob_imageClic = this;
            let ob_imageClig = null;
 
            window.requestAnimationFrame(function animation() {
              const tempEcouleNouv = performance.now();
              const dureeRafr = Math.min(tempEcouleNouv - tempsEcoule, dureeRafrRef);
              tempsEcoule = tempEcouleNouv;
 
              if ((delai -= dureeRafr) <= 0) {
                if (nombClig > 0) {
                  nombClig--;
                  if (ob_imageClig !== null) {
                    ob_imageClig.style.visibility = "";
                  }
                }
                let i =
                  ar_ordreIndexClig[(compteur + decalage) % ar_ordreIndexClig.length];
                if (nombClig === 0) {
                  while (nl_images[i].style.visibility === "hidden") {
                    compteur++;
                    i =
                      ar_ordreIndexClig[
                        (compteur + decalage) % ar_ordreIndexClig.length
                      ];
                  }
                }
                (ob_imageClig = nl_images[i]).style.visibility = "hidden";
                if (++compteur >= ar_ordreIndexClig.length) {
                  compteur = 0;
                  melanger(ar_ordreIndexClig);
                  decalage = Number(ar_ordreIndexClig[0] === i);
                }
                delai = 2 * dureeRafrRef;
              }
 
              for (const ob_image of nl_images) {
                if (ob_image.style.visibility !== "hidden") {
                  window.requestAnimationFrame(animation);
                  return;
                }
              }
 
              nl_images[(nl_images.length - 1) * 0.5].style.visibility = "";
 
              const lien = liens[index];
              ob_lien.href = lien;
              ob_lien.onclick = null;
              ob_lien.download = lien.substr(lien.lastIndexOf("/") + 1);
              ob_lien.click();
            });
 
            let tempsEcoule = performance.now();
          };
        }
      }
 
      groupe(ar_liens, ".anim-g");
      groupe(ar_liens2, ".anim-f");

[jeicko]

Après pas mal d’essais je n’ai toujours pas réussi à comprendre d’où peut venir le problème. Si quelqu’un a une piste je suis toujours preneur

[tag9724]

Ta variable `let nombClig = 10;` est dehors du scope de ta fonction `groupe` ce qui fait qu'au lancement de la seconde animation elle est égale a 0 au lieu de 10, il suffit de la déclarer dans la fonction et le tour est joué.

Remplace

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
const dureeRafrRef = 1000 / 25;
let nombClig = 10;
 
function groupe(liens, parent) {

Par

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
const dureeRafrRef = 1000 / 25;
 
function groupe(liens, parent) {
  let nombClig = 10;

Pour ce qui est de l'animation il y'a aussi moyen de la faire en CSS ( exemple ici : https://jsfiddle.net/z5bgeu9r/ )

[jeicko]

Nickel ça fonctionne ! Et merci pour la démo en CSS bien détaillée.

Je passe le sujet en résolu, un grand merci