Faire un message de notification animé

Que ce soit pour prévenir rapidement vos utilisateurs qu'une fonctionnalité de votre site n'est pas encore disponible ou pour les prévenir qu'une action a été réalisée avec succès, les notifications sont le moyen le plus simple et moderne à mettre en place. Découvrons dans cet article comment faire !

1ère étape

Commençons avec le HTML.

<button>
  Créer un compte
</button>

<div id="notification">
  🎉 Compte créé avec succès 🎉
</div>

Lorsque nous cliquerons sur le bouton, la notification apparaîtra comme par magie !

2ème étape

Stylisons le bouton.

button {
  font-size: 1.2rem;
  color: #fff;
  background: #ff4754;
  padding: 1.2rem 2.4rem;
  border-radius: 0.2rem;
  transition: all 0.2s;
}

button:hover {
  cursor: pointer;
  opacity: 0.8;
}

3ème étape

Occupons-nous de la notification.

#notification {
  position: fixed;
  bottom: -8rem;
  color: #ff4754;
  background: #000;
  padding: 1.2rem 2.4rem;
  border-radius: 0.2rem;
  box-shadow: 3px 6px 12px rgba(0, 0, 0, 0.4);
  transition: all 0.4s;
}

4ème étape

Créons la classe show.

#notification.show {
  bottom: 2rem;
}

Le secret réside dans cette classe. Dans l’étape précédente nous avons précisé que notre notification devait être caché grâce à la propriété bottom.

Nous ajouterons dynamiquement cette classe sur notre notification grâce à JavaScript pour faire apparaître notre message.

5ème étape

Sélectionnons nos éléments avec JavaScript.

const button = document.querySelector('button');
const toast = document.querySelector('#notification');

Nous sélectionnons juste nos deux éléments : notre bouton et notre message.

6ème étape

Il ne reste plus qu'à ajouter et retirer la classe show de notre message.

button.addEventListener("click", () => {
  toast.classList.add("show");
  setTimeout(() => {
    toast.classList.remove("show");
  }, 2000);
});

Lorsque notre utilisateur clique sur le bouton, nous ajoutons la classe show puis nous la retirons au bout de deux secondes pour faire disparaître le message.