Fondamentaux

Boutons Texte & Typo Formulaires Navigation & UI Chargement

Design & Visuels

Backgrounds Glass & Morphism Effets Visuels Liquid & Morphing SVG & Art

Animations & Scroll

Scroll & Parallax Transitions Hover & Interactions 3D & Profondeur Curseurs

Galerie & Plus

Cartes & Layouts Galerie & Média Data & Visualisation Atmosphère Utilitaires
Tous les effets Nouveautés Favoris Templates Blog Astuces ✨ Passer Premium
AtmosphèreGratuit

Notification Chime

Toast CSS émeraude avec transition fade-up de 0,3 s et classe `.show` — un bouton natif déclenche l'apparition, zéro dépendance, zéro JS dans l'effet.

Web AudioNotificationChime
✅ Nouveau message recu !
Survolez ou cliquez la scène pour interagir

Cet effet est gratuit — la catégorie Atmosphère en contient 57 au total, dont 10 gratuits. Effect.Labs regroupe 811 effets vanilla. Découvrir la catégorie →

Voir dans le catalogue Compte gratuit

Exemples d'usage

v2.0 — Disponible

L'outil que votre équipe attendait

Plus rapide, plus léger, collaboratif. Essayez maintenant.

✅ Version 2.0 disponible — découvrez les nouveautés

① Hero / Landing — Bannière de mise à jour produit

QuandLe produit vient de passer en version majeure et vous souhaitez afficher une notification persistante en haut de la landing page pendant 48 h.
PourquoiLa forme du toast est discrète : il n'interrompt pas le scroll ni le focus sur le CTA principal. L'émeraude par défaut se lit comme un signal positif sans attirer l'œil autant qu'une alerte rouge.
RéglagesRemplacez la couleur par votre ton de brand ; passez transition: 0.5s pour une apparition plus douce ; déclenchez .snd-notif-toast.show directement au DOMContentLoaded avec setTimeout(removeShow, 6000) pour un auto-dismiss à 6 s.
Rapport trimestriel
Dernière édition · il y a 2 min

Toutes les modifications sont en brouillon. Sauvegardez pour publier la version mise à jour auprès de votre équipe.

✅ Sauvegardé · Publié auprès de votre équipe

② Composant produit — Confirmation de sauvegarde dans un éditeur

QuandL'utilisateur clique « Sauvegarder » dans un éditeur ou un formulaire long — le toast confirme l'opération sans bloquer l'interface avec une modale.
PourquoiLe toast disparaît seul (auto-dismiss 3 s), donc l'utilisateur reprend son travail sans clic supplémentaire. La couleur émeraude est conventionnellement associée au succès (<em>green = OK</em>) — réutilisable tel quel ou remplacée par votre `--color-success`.
Réglagestransition: 0.2s pour une confirmation plus réactive ; texte du toast adapté à l'action (« ✅ Brouillon sauvegardé ») ; auto-dismiss à 3 s via setTimeout(() => toast.classList.remove('show'), 3000).
Messages 2
Jean D.
Ticket résolu, merci !
9:14
Marie L.
Pouvez-vous vérifier la commande #4821 ?
9:02
🔔 Sophie M. — Bonjour, j'ai une question sur mon abonnement

③ Centre de notifications — Arrivée d'un message en temps réel

QuandUn agent de support ou un utilisateur reçoit un nouveau message dans une messagerie ou une app de ticketing — la cloche synthétisée + le toast confirment l'arrivée sans interrompre le fil de la conversation en cours.
PourquoiC'est le contexte naturel de l'effet : chime + apparition fade-up imitent exactement le pattern UX des apps de messagerie (Slack, Intercom, Zendesk). La couleur émeraude s'associe à la disponibilité (« en ligne »), et le toast disparaît seul — l'agent n'a pas à cliquer pour reprendre son travail.
Réglagestransition: 0.3s conservé (réponse instantanée perçue) ; texte du toast adapté au nom de l'expéditeur ; auto-dismiss à 4 s via setTimeout(() => toast.classList.remove('show'), 4000) ; intégrez un AudioContext triangle 880 Hz + sine 1320 Hz pour le chime natif.

Comment ça marche

Le HTML expose deux éléments dans un .snd-notif-container flex en colonne : un <button class="snd-notif-trigger"> et un <div class="snd-notif-toast">. Le toast démarre invisible (opacity: 0, transform: translateY(10px)) — ces deux propriétés sont déclarées en état de repos dans la règle .snd-notif-toast.

La transition d'apparition repose entièrement sur CSS : transition: 0.3 s s'applique à toutes les propriétés animables. Quand la classe .show est ajoutée au toast, le navigateur interpole automatiquement opacity 0 → 1 et translateY(10px) → translateY(0) sur 300 ms — sans une seule instruction requestAnimationFrame.

La palette tient en une seule couleur émeraude rgb(16, 185, 129) déclinée à trois opacités : texte (1,0), fond (0,15–0,20) et bord (0,30). Les deux éléments partagent ce triplet, ce qui garantit la cohérence visuelle quelle que soit la couleur substituée.

Le champ js du fichier source contient uniquement le commentaire « Effet CSS pur — pas de JavaScript nécessaire » : l'effet ne fournit aucune logique de déclenchement. C'est intentionnel — vous ajoutez la classe .show via votre propre code (clic, événement métier, timeout d'auto-dismiss). Aucun son de cloche n'est inclus dans le code livré malgré le nom de l'effet ; l'intégration audio est laissée à l'intégrateur (Web Audio API ou fichier `.mp3`).

Accessibilité

  • Aucun support de prefers-reduced-motion dans le code actuel : la transition CSS s'exécute inconditionnellement, même si l'OS signale une préférence pour réduire le mouvement.
  • .snd-notif-trigger est un <button> natif — focusable au clavier (Tab), activable par Entrée et Espace, avec rôle button implicitement fourni au lecteur d'écran.
  • .snd-notif-toast ne porte ni aria-live ni role="alert" — les lecteurs d'écran n'annoncent pas automatiquement l'apparition du toast ; à ajouter manuellement en production.
  • Aucun aria-label ni aria-describedby sur la notification — le contenu texte du toast est accessible mais pas lié programmatiquement au bouton déclencheur.
  • Contraste texte : rgb(16, 185, 129) (#10b981) sur fond sombre composite (~#0b2420) donne un ratio ≥ 12:1 — passe largement WCAG AA et AAA pour le texte normal.

Compatibilité navigateur

Repose uniquement sur les transitions CSS et la propriété transform — supportés universellement depuis 2013. Aucun JS côté effet.

Chrome 88+✓ Complet
Firefox 87+✓ Complet
Safari 15+✓ Complet
Edge 88+✓ Complet
Mobile iOS✓ Complet
Android Chrome✓ Complet

Sans support CSS <code>transition</code> (IE ≤ 9), le toast passe directement à son état final sans animation — le contenu reste lisible.

Le code

Copiez les trois blocs dans votre page. Aucune dépendance.

HTML 
<div class="snd-notif-container">
  <button class="snd-notif-trigger" id="sndNotifBtn">🔔 Notification</button>
  <div class="snd-notif-toast" id="sndNotifToast">✅ Nouveau message recu !</div>
</div>
CSS 
.snd-notif-container  {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 12px;
   }

.snd-notif-trigger  {
   padding: 10px 20px;
   border-radius: 8px;
   background: rgba(16, 185, 129, 0.2);
   border: 1px solid rgba(16, 185, 129, 0.3);
   color: rgb(16, 185, 129);
   cursor: pointer;
   font-size: 0.85rem;
   }

.snd-notif-toast  {
   padding: 10px 16px;
   border-radius: 8px;
   background: rgba(16, 185, 129, 0.15);
   border: 1px solid rgba(16, 185, 129, 0.3);
   color: rgb(16, 185, 129);
   font-size: 0.8rem;
   opacity: 0;
   transform: translateY(10px);
   transition: 0.3s;
   }

.snd-notif-toast.show  {
   opacity: 1;
   transform: translateY(0px);
   }
JavaScript (fx-0528) 
// Effet CSS pur — pas de JavaScript nécessaire

Personnaliser

Options passées à l'API ou attributs data-* :

Option / propriétéDéfautEffet
rgb(16, 185, 129) émeraude #10b981 Couleur principale du composant — présente 3 fois dans le CSS (text, fond, bord). Remplacez partout par une seule couleur brand pour cohérence.
transition: 0.3s 0,3 s Durée d'animation d'apparition/disparition du toast. 0,15 s = confirme immédiatement ; 0,6 s = entrée douce pour une bannière persistante.
transform: translateY(10px) montée de 10 px Direction et amplitude de l'entrée. translateY(-10px) pour descendre depuis le haut ; translateX(-10px) pour glisser depuis la gauche ; augmentez à 20–30 px pour un mouvement plus ample.
border-radius: 8px 8 px Rayon des coins sur le bouton et le toast. 0 = cartes angulaires ; 24px = pill ; la valeur est répétée deux fois dans le CSS.
font-size: 0.8rem 0,8 rem (toast) Taille du texte dans le toast. Le bouton est à 0,85 rem. Montez à 0,9–1 rem si le toast sert de message principal plutôt que de confirmation secondaire.
gap: 12px 12 px Espace vertical entre le bouton déclencheur et le toast dans le conteneur flex. Réduisez à 6 px pour un toast collé juste sous le bouton.
padding: 10px 16px 10px 16px (toast) Rembourrage interne du toast. Le bouton utilise 10px 20px. Réduisez à 6px 12px pour un toast compact dans un dashboard dense.

FAQ

Comment déclencher l'apparition et le retrait du toast ?

Le code ne fournit pas de JS — ajoutez simplement : btn.addEventListener('click', () => { toast.classList.add('show'); setTimeout(() => toast.classList.remove('show'), 3000); });. Remplacez 3000 par la durée souhaitée en ms, ou retirez le setTimeout pour un toast persistant jusqu'au prochain clic.

Pourquoi l'effet s'appelle « Notification Chime » si aucun son n'est inclus ?

Le code livré est CSS pur — aucune Web Audio API n'est présente dans le fichier source. Pour ajouter le son de cloche, créez un AudioContext, deux oscillateurs (triangle ~880 Hz + sine ~1320 Hz) avec une enveloppe courte (attack 10 ms, decay 500 ms) et appelez oscillator.start() sur le même clic que la classe .show. Aucune modification du composant CSS n'est nécessaire.

Comment ajouter le support prefers-reduced-motion ?

Deux options : CSS uniquement — ajoutez @media (prefers-reduced-motion: reduce) { .snd-notif-toast { transition: none; } } pour supprimer la transition et afficher le toast instantanément. Ou JS — vérifiez window.matchMedia('(prefers-reduced-motion: reduce)').matches avant de lancer un éventuel son et passez transition-duration: 0s dynamiquement.