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