Toast Success
Une notification verte glisse depuis la droite, reste 3 secondes et disparaît — feedback de succès instantané, non-bloquant.
Vous aurez accès à la démo interactive avec un compte gratuit.
Cet effet fait partie d'Effect.Labs — 811 effets vanilla, une partie gratuite, une partie premium. Navigation comprend 36 effets, dont 4 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
La fonction globale showToast(type, message) cible #toastContainer via getElementById, crée un <div class="toast {type}"> et l'injecte dans le conteneur. L'icône SVG (coche, croix ou point d'info) est générée inline selon le type — aucune ressource externe n'est chargée.
L'animation d'entrée toastSlideIn fait glisser le toast depuis translateX(100%) jusqu'à sa position de repos en 0,4 s avec un cubic-bezier(0.4, 0, 0.2, 1) — un easing Material Design qui accélère puis freine. Au bout de 3 000 ms, un setTimeout ajoute la classe .hiding qui déclenche toastSlideOut (0,3 s ease vers translateX(100%)). Un second setTimeout de 300 ms retire le nœud du DOM via toast.remove().
Le .toast-container est position: fixed; top: 20px; right: 20px; z-index: 9999 — ancré en coin supérieur-droit quel que soit le scroll de la page. Des appels successifs à showToast() empilent les toasts verticalement via flex-direction: column; gap: 10px ; chacun gère sa propre minuterie de fermeture de façon indépendante.
Accessibilité
- Pas de prefers-reduced-motion : les animations
toastSlideInettoastSlideOuts'exécutent systématiquement. Ajoutez@media (prefers-reduced-motion: reduce) { .toast { animation: none; } }pour les désactiver. - Le
#toastContainern'a pas d'aria-livedans le code fourni — les toasts ne sont pas annoncés aux lecteurs d'écran. Ajoutezaria-live="polite" aria-atomic="true"sur le conteneur pour corriger cela. - Contraste texte blanc sur fond vert
#059669: ratio ≥ 4,5:1, conforme WCAG AA. - Pas de mécanisme de fermeture au clavier — aucun bouton Fermer ni gestion de la touche Échap dans le JS.
- Les icônes SVG inline ne portent ni
aria-hiddenniaria-label— ajoutezaria-hidden="true"sur chaque<svg>pour éviter leur verbalisation par les AT.
Compatibilité navigateur
Nécessite createElement, classList et les animations CSS — supportés dans tous les navigateurs modernes.
Sans CSS, le toast s'affiche en texte brut dans le flux — aucune erreur JS. Si <code>getElementById('toastContainer')</code> ne trouve pas le conteneur, la fonction retourne silencieusement.
Le code
Structure HTML à coller dans votre page (CSS + JS disponibles avec un compte premium) :
<div class="toast-container" id="toastContainer"></div>
<!-- Bouton déclencheur (placez-le n'importe où dans votre UI) -->
<button class="toast-trigger" onclick="showToast('success', 'Action réussie !')">
Déclencher le toast
</button>HTML + CSS + JS complet, prêt à coller — avec des centaines d'effets premium.
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
| .toast.success background | linear-gradient(135deg, #10b981, #059669) | Couleur du fond du toast — remplacez par votre gradient brand. |
| .toast-container top / right | 20px / 20px | Position en coin. Pour passer en bas à droite : top: auto; bottom: 20px;. |
| .toast min-width | 280px | Largeur minimale — augmentez à 320–360 px pour des messages plus longs sans retour à la ligne. |
| .toast border-radius | 12px | Arrondi des coins. 0 pour un look carré, 24 px pour un style pill. |
| setTimeout délai (3e3) | 3000 ms | Durée d'affichage avant disparition — modifiez la constante dans la fonction showToast. |
| toastSlideIn duration | 0.4s | Vitesse de l'animation d'entrée — réduisez à 0.2 s pour un feedback plus nerveux. |
| .toast font-size / font-weight | 0.95rem / 500 | Taille et graisse du texte — ajustez selon votre typographie. |
| .toast gap | 12px | Espacement entre l'icône SVG et le texte du message. |
FAQ
showToast() ajoute un nouveau <div> dans #toastContainer — ils s'empilent verticalement via flex-direction: column; gap: 10px. Ajoutez un compteur JS et ignorez l'appel si un plafond est atteint pour éviter la surcharge visuelle..toast-container : top: auto; bottom: 20px; right: auto; left: 20px;. Pour un glissement depuis la gauche, remplacez aussi translateX(100%) par translateX(-100%) dans les keyframes toastSlideIn et toastSlideOut.aria-live="polite" aria-atomic="true" sur le <div id="toastContainer"> pour que les AT lisent chaque message dès son insertion dans le DOM.
