Notification Bell
Une cloche de notification qui sonne et tremble au clic, fait apparaître un badge compteur, puis glisse un toast de confirmation — trois animations CSS enchaînées en séquence, une seule interaction.
Mis à jour le
Cet effet fait partie d'Effect.Labs — 840 effets vanilla, une partie gratuite, une partie premium. Hover comprend 48 effets, dont 5 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
La racine .fx-0366-root (250 px de haut, fond rgb(26, 26, 36)) centre un groupe formé du bouton cloche et du toast. Le bouton .mi-bell-btn contient un SVG de cloche et un span.mi-bell-badge (badge rond rouge, initialement caché). Le .mi-bell-toast est un div de notification positionné juste en dessous du bouton, initialement invisible (opacity: 0; transform: translateY(10px)). La zone de notification a role="status", aria-live="polite" et aria-atomic="true".
Au clic, le script incrémente un compteur interne et met à jour l'aria-label du bouton avec ce nouveau décompte (ex. : Notifications, 4 non lues). Côté CSS, l'ajout de la classe .ringing sur le bouton déclenche @keyframes miBellShake (rotation ±15°, 0,5 s) sur le SVG, et l'ajout de .show-badge fait apparaître le badge avec @keyframes miPopIn (scale 0 → 1,2 → 1 en 0,3 s). Le toast se révèle avec opacity: 1; translateY(0) en transition de 0,3 s. Après 2 s, les classes sont retirées et le toast s'efface.
L'agitation de la cloche, l'apparition du badge et le toast sont indépendants en CSS — leurs animations s'enchaînent via des décalages de transition (transition-delay) plutôt que des setTimeout imbriqués. Seul le retrait automatique des classes après 2 s utilise setTimeout. Le script met aussi à jour la valeur textuelle du badge (badge.textContent) et garde un compteur cohérent entre les clics.
Accessibilité
- Clavier : le bouton cloche est un vrai
<button>; Tab l'atteint, Espace ou Entrée le déclenche. Le contour de focus (:focus-visible) apparaît à la navigation au clavier. - Toast annoncé : le toast a
role="status"etaria-live="polite": son contenu textuel est annoncé par les lecteurs d'écran à son apparition, sans interrompre la lecture en cours (polite). - Compteur dans le label : l'
aria-labeldu bouton est mis à jour au clic avec le nombre de notifications non lues. Le badge visuel aaria-hidden="true"pour éviter la double annonce. - Mouvement réduit : sous
prefers-reduced-motion: reduce, l'agitation de la cloche et la translation du toast sont supprimées. Le badge apparaît et le toast s'affiche par transition d'opacité uniquement, sans mouvement. - Toucher : le bouton répond normalement aux événements tactiles. Sa cible de 48×48 px est confortable.
Compatibilité navigateur
CSS (animations @keyframes, transitions, aria-live) + 0,5 Ko de JavaScript (classList, textContent, setAttribute, setTimeout), aucune dépendance. Vérifié dans Chromium 151 : séquence complète, aria-live annoncé, compteur mis à jour, deux copies indépendantes, mouvement réduit sans agitation ni translation, 0 erreur.
Sans JavaScript, la cloche est affichée au repos, le badge et le toast ne s'affichent pas au clic. Sans CSS animations, les changements d'état sont instantanés sans animation de sonnerie ni de glissement.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0366-root">
<div class="mi-bell-scene">
<button class="mi-bell-btn" aria-label="Notifications">
<svg viewBox="0 0 24 24">
<path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9M13.73 21a2 2 0 0 1-3.46 0"></path>
</svg>
<span class="mi-bell-badge" aria-hidden="true">3</span>
</button>
<div class="mi-bell-toast" role="status" aria-live="polite" aria-atomic="true">Nouvelle notification !</div>
</div>
</div>Paiement unique, sans abonnement — le code est à toi pour toujours
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
Contenu du toast (HTML — texte dans .mi-bell-toast) |
Nouvelle notification ! | Remplacez par le message de votre application. Pour un message dynamique, mettez à jour toast.textContent dans le script avant d'ajouter la classe d'affichage. |
Durée d'affichage du toast (JS — setTimeout) |
2 000 ms | Allongez à 4 000 ms pour un message plus long à lire ; réduisez à 1 200 ms pour un toast discret. |
Couleur du badge (CSS — background de .mi-bell-badge) |
Rouge #ef4444 |
Passez à orange (#f97316) pour une alerte non critique, ou vert (#10b981) pour une notification positive. |
Intensité de l'agitation (CSS — @keyframes miBellShake) |
±15° en 0,5 s | Réduisez à ±8° pour une agitation subtile ; augmentez à ±25° pour une sonnerie plus dramatique. Réduisez la durée à 0,3 s pour une sonnerie vive. |
FAQ
setTimeout de retrait. Le compteur continue de s'incrémenter correctement..fx-0366-root si plusieurs instances coexistent..mi-bell-toast est un div ordinaire ; ajoutez-y une icône SVG ou une image avant le texte. Veillez à ce que le texte reste la première information pour les lecteurs d'écran (aria-live lit le contenu textuel du div).
