Animer des emojis comme sur Discord

Envie de créer un bouton dont l'emoji change à chaque passage de la souris ? Comme sur Discord ? Alors cet article est fait pour vous !

1ère étape

Le code HTML.

<div id="emoji">😁</div>

Rien de très compliqué ici : nous déclarons une division avec un identifiant emoji.

Astuce : Allez chercher vos emojis sur getemoji.com

2ème étape

Stylisons maintenant l'id emoji.

#emoji {
  font-size: 5rem;
  filter: grayscale(1);
  cursor: pointer;
  transition: all 0.2s;
}

#emoji:hover {
  transform: scale(1.3);
  filter: grayscale(0);
}

grayscale() permet de transformer une image en couleurs grisatres.

3ème étape

Passons au JavaScript en ajoutant des emojis.

const btn = document.querySelector("#emoji");
const emojis = [
  "😆", "😅", "🤣", "😂",
  "😀", "🤑", "🤨", "🙂",
  "😊", "😗", "😛", "😏",
  "🤥", "😴", "🥺", "😧"
];

4ème étape

Détectons le survol de l'emoji.

btn.addEventListener("mouseover", () => {
  btn.innerText = emojis[Math.floor(Math.random() * emojis.length)];
});

Dès que nous survolons l’emoji, nous remplaçons le texte de l’identifiant emoji par un nouvel emoji.

Pour ce faire nous générons un nombre aléatoire que nous multiplions par le nombre d’emoji que nous possédons.