🎵 Nouveau — Mode studio
Le son comme vous l'aimez.
Activez le mode studio pour une écoute immersive.
Son coupé
Actif
OFF
AtmosphèreGratuit
Toggle Switch Sound
Toggle switch CSS pur avec animation spring sur le knob — transition cubique à overshoot (cubic-bezier(0.34, 1.56, 0.64, 1)) qui donne une sensation de masse physique sans une ligne de JavaScript.
OFF
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 →
Exemples d'usage
Sons et notifications
Sons d'alerte
Joue un son à chaque notification
Son aperçu message
Son court à l'arrivée d'un message
Sons d'interface
Clics, toggles, confirmations
Réglages
Apparence
Mode sombre
Notifications
Alertes push
Confidentialité
Mode privé
Comment ça marche
Le composant est construit autour de deux éléments imbriqués : la piste (.snd-toggle, 60 × 32 px, border-radius 16 px) et le knob (.snd-toggle-knob, 26 × 26 px, positionné en absolu à 3 px de chaque bord). La bascule d'état se résume à ajouter ou retirer la classe .on sur la piste — tout le reste est CSS.
L'animation du knob repose sur transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1). La courbe de bézier est un easing à overshoot : la coordonnée Y du second point de contrôle (1.56) dépasse 1.0, ce qui fait que le knob glisse légèrement au-delà de la position finale (translateX(28px)) avant de revenir — c'est ce rebond mécanique qui distingue un toggle « physique » d'un simple glissement linéaire. La piste change de fond (rgba(255,255,255,0.1) → rgb(99,102,241)) avec sa propre transition de 0.3s indépendante.
Le déplacement de 28 px du knob est calculé : largeur piste − taille knob − 2 × padding = 60 − 26 − 6 = 28. Si vous modifiez les dimensions, recalculez ce chiffre sinon le knob déborde ou s'arrête trop tôt. Le label (#sndToggleLabel) et le clic ne sont pas gérés dans le code fourni : le champ JS contient un commentaire vide signalant que le composant est purement CSS, l'intégration du clic et de la mise à jour du label est à la charge du développeur.
Pour les sons différenciés annoncés dans le nom de l'effet, la voie recommandée est la Web Audio API : créer un AudioContext, générer deux OscillatorNode courts (fréquence haute ~880 Hz pour ON, basse ~220 Hz pour OFF) avec une enveloppe de gain qui monte et descend en 40 ms. Les IDs sndToggle et sndToggleLabel sont les points d'entrée prévus pour ce câblage.
Accessibilité
- prefers-reduced-motion absent : le CSS ne contient pas de bloc
@media (prefers-reduced-motion: reduce). Les deux transitions (background 0.3s, transform spring 0.3s) s'exécutent systématiquement. Ajoutez@media (prefers-reduced-motion: reduce) { .snd-toggle, .snd-toggle-knob { transition: none; } }pour respecter les préférences OS. - Rôle ARIA absent :
.snd-toggleest une<div>sansrole="switch", sansaria-checkedet sanstabindex. Les lecteurs d'écran ne l'identifient pas comme un commutateur. Ajoutezrole="switch",tabindex="0"et alternezaria-checked="false"/"true"dans le handler de clic. - Navigation clavier non gérée : aucun
keydownsur Espace ou Entrée dans le code fourni. Un utilisateur clavier ne peut pas basculer le toggle sans JS supplémentaire. - Contraste du label conditionnel : la couleur
var(--text-secondary)dépend du thème de la page hôte. WCAG AA (rapport ≥ 4,5:1) n'est pas garanti par le code tel quel — vérifiez dans votre contexte de déploiement. - La piste porte
cursor: pointer, signal correct pour une zone cliquable ; la zone de clic englobe bien les 60 × 32 px du toggle (taille suffisante pour les cibles tactiles WCAG 2.5.5).
Compatibilité navigateur
Composant CSS pur : transitions, transform et cubic-bezier supportés dans tous les navigateurs modernes depuis 2015. Zéro JavaScript fourni, zéro dépendance externe.
Chrome 49+✓ Complet
Firefox 44+✓ Complet
Safari 10+✓ Complet
Edge 79+✓ Complet
Mobile iOS✓ Touch OK
Android Chrome✓ Complet
Sans support CSS transitions (navigateurs très anciens), le knob saute instantanément en position et la couleur de fond change sans animation — fonctionnel, sans erreur JS.
Le code
Copiez les trois blocs dans votre page. Aucune dépendance.
HTML
<div class="snd-toggle-container">
<div class="snd-toggle" id="sndToggle">
<div class="snd-toggle-knob">
</div>
</div>
<div class="snd-toggle-label" id="sndToggleLabel">OFF</div>
</div>
CSS
.snd-toggle-container {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
}
.snd-toggle {
width: 60px;
height: 32px;
border-radius: 16px;
background: rgba(255, 255, 255, 0.1);
position: relative;
cursor: pointer;
transition: background 0.3s;
}
.snd-toggle.on {
background: rgb(99, 102, 241);
}
.snd-toggle-knob {
width: 26px;
height: 26px;
border-radius: 50%;
background: rgb(255, 255, 255);
position: absolute;
top: 3px;
left: 3px;
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.snd-toggle.on .snd-toggle-knob {
transform: translateX(28px);
}
.snd-toggle-label {
font-size: 0.8rem;
color: var(--text-secondary);
}
JavaScript (fx-0530)
// Effet CSS pur — pas de JavaScript nécessairePersonnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
| .snd-toggle.on { background } | rgb(99,102,241) | Couleur indigo de la piste en état ON — remplacez par votre couleur brand principale. |
| .snd-toggle { background } | rgba(255,255,255,0.1) | Fond semi-transparent en état OFF. Augmentez l'opacité (ex. 0.25) si le contraste est insuffisant sur fond sombre. |
| .snd-toggle { width / height } | 60px / 32px | Dimensions de la piste. Respectez le ratio ~2:1 ; mettez à jour border-radius (= height/2) et translateX en conséquence. |
| .snd-toggle-knob { width / height } | 26px / 26px | Taille du knob circulaire. Doit rester ≤ height − 6px pour tenir dans les 3 px de marge de chaque côté. |
| .snd-toggle.on .snd-toggle-knob { transform } | translateX(28px) | Déplacement du knob en état ON = width − knob − 2 × 3px. Recalculez si vous changez les dimensions. |
| .snd-toggle-knob { transition: … cubic-bezier } | cubic-bezier(0.34, 1.56, 0.64, 1) | Easing spring avec overshoot (1.56 > 1.0). Réduisez le 3e paramètre vers 1.0 pour un glissement linéaire sans rebond. |
| .snd-toggle-knob { transition-duration } | 0.3s | Durée de l'animation knob. 0.15s = toggle vif et sec, 0.5s = toggle lent et fluide (valeur aussi à mettre à jour sur la piste). |
FAQ
Pourquoi le code ne contient pas de JavaScript alors que l'effet s'appelle 'Toggle Switch Sound' ?
Le code fourni est la fondation CSS du composant : la piste, le knob et l'animation spring. L'intégration du clic, de la mise à jour du label et des sons (Web Audio API) est laissée au développeur pour s'adapter à n'importe quel framework. Copiez le CSS, ajoutez document.getElementById('sndToggle').addEventListener('click', fn) dans votre fn, basculez la classe .on et déclenchez vos oscillateurs.
Comment ajouter des sons différenciés pour ON et OFF ?
Via la Web Audio API (zero dépendance) : créez un AudioContext, dans le handler de clic générez un OscillatorNode à 880 Hz (ON) ou 220 Hz (OFF), reliez-le à un GainNode avec une enveloppe courte (gain 0 → 0.3 en 5 ms, → 0 en 40 ms), puis appelez osc.start() / osc.stop(ctx.currentTime + 0.06). L'ensemble représente ~15 lignes de JS et respecte la politique autoplay des navigateurs modernes (déclenché sur geste utilisateur).
Comment rendre ce toggle accessible aux lecteurs d'écran et au clavier ?
Ajoutez sur la div .snd-toggle : role="switch", tabindex="0", aria-label="Activer le son" et aria-checked="false". Dans votre handler, alternez aria-checked entre "true" et "false" au même moment que la classe .on. Pour le clavier, écoutez keydown sur Espace et Entrée pour déclencher le même handler que le clic.
