Liquid Glass Toggle
Un interrupteur de verre de 72 × 36 px dont la bille de 30 px glisse avec un léger dépassement et s'écrase pendant la course — aplatie à 125 × 75 %, puis étirée, puis ronde en 0,5 s — au clic comme au clavier (Espace, Entrée), avec son état annoncé aux lecteurs d'écran.
Mis à jour le
Cet effet fait partie d'Effect.Labs — 840 effets vanilla, une partie gratuite, une partie premium. Glassmorphism comprend 47 effets, dont 6 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
La piste .lg-toggle est une vitre de 72 × 36 px aux bouts ronds : fond blanc à 8 %, backdrop-filter: blur(8px) (avec -webkit-), bordure blanche à 15 %. Allumée (.active), elle se teinte d'indigo à 20 % avec une bordure indigo à 40 %, en 0,4 s. La bille .lg-toggle-knob (30 px, à 3 px du bord) est une goutte de verre : dégradé radial blanc décentré en haut à gauche, son propre flou de 8 px avec saturation ×1,5, bordure blanche à 30 %, ombre portée et reflet intérieur. Sa position left passe de 3 à 39 px avec une courbe cubic-bezier(.34, 1.56, .64, 1) : elle dépasse un peu sa place avant de s'y poser.
Le script, à chaque bascule, inverse .active, met à jour aria-checked et relance l'animation lgKnobSquish (0,5 s) : il retire la classe .squishing, force un recalcul (offsetWidth) et la remet, pour que l'écrasement rejoue à chaque clic. À 30 % de l'animation la bille est à scale(1.25, .75) avec un arrondi plus plat en haut, à 60 % à scale(.85, 1.15), à 80 % à scale(1.05, .95), puis ronde. Mesuré 150 ms après un clic : matrix(1.23, 0, 0, 0.77, 0, 0) dans Chromium 151, matrix(1.25, 0, 0, 0.75, 0, 0) dans Firefox 153 ; 600 ms plus tard, la bille est à 40 px du bord gauche de la piste (4 px au départ, bordure comprise).
L'interrupteur est construit pour cohabiter avec votre page. Le script n'expose rien en global — aucune fonction toggle() qui pourrait remplacer celle d'un menu ou d'un thème — et s'applique à chaque élément [data-lg-toggle] (mesuré : typeof window.toggle vaut undefined). L'élément porte role="switch", tabindex="0" et aria-checked, Espace et Entrée le basculent, et un contour :focus-visible de 2 px le signale — mesuré dans Chromium, Firefox et WebKit : Tab donne le focus, Espace allume (aria-checked="true", page sans défilement), Entrée éteint. Enfin .lg-toggle-wrap porte un décor (deux disques nets, hachures) sous la piste : sur un fond uni, le flou de la bille ne se verrait pas.
Accessibilité
- Nom accessible : l'interrupteur annonce son rôle et son état, mais pas ce qu'il commande — le texte « Click to toggle » à côté n'y est pas relié. Donnez-lui un nom :
aria-label="Chauffage du bassin", ou unidsur le libellé visible etaria-labelledbysur l'interrupteur. Sans cela, un lecteur d'écran dit seulement « interrupteur, désactivé ». - Clavier : Tab, puis Espace ou Entrée (mesuré dans les trois moteurs). Espace est intercepté (
preventDefault) pour ne pas faire défiler la page. Le contour de focus#a5b4fcmesure 8,0:1 sur le décor#1e1b4bet 9,9:1 sur#0a0a0f; il n'apparaît qu'au clavier, pas au clic. - État lisible sans la couleur : c'est la position de la bille qui dit allumé ou éteint ; la teinte indigo à 20 % de la piste allumée est faible (la bordure au repos mesure 1,6:1 sur le décor). Si l'état compte (chauffage, alarme), doublez-le d'un mot à côté — « En marche » / « Arrêté » — comme dans les scènes de cette page.
- Mouvement : glissement et écrasement durent 0,5 s et ne se produisent qu'à l'action de l'utilisateur. Pour
prefers-reduced-motion, rien n'est prévu : ajoutez@media (prefers-reduced-motion: reduce) { .lg-toggle-knob { transition: left .15s; } .lg-toggle-knob.squishing { animation: none } }— la bille glisse vite et sans rebond.
Compatibilité navigateur
CSS : backdrop-filter (et -webkit-), transitions avec courbe à dépassement, @keyframes sur transform et border-radius elliptique, :focus-visible. JS : classList, setAttribute, keydown. HTML : role="switch" et aria-checked. Zéro dépendance. Mesuré dans Chromium 151, Firefox 153 et WebKit 26.5 : bascule au clic, à Espace et à Entrée, écrasement rejoué à chaque bascule, aucune erreur console.
Les versions minimales sont celles de :focus-visible. Avant, la règle de contour est ignorée : l'interrupteur marche, au clavier aussi, mais le focus ne se voit plus. Sans backdrop-filter (Firefox avant 103), piste et bille restent translucides sans flou ; l'écrasement et le glissement sont inchangés.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec Premium) :
<div class="demo-preview">
<div class="lg-toggle-wrap">
<div class="lg-toggle" data-lg-toggle="" role="switch" tabindex="0" aria-checked="false">
<div class="lg-toggle-knob"></div>
</div>
<span class="lg-toggle-label">…</span>
</div>
</div>Le code complet HTML + CSS + JS de Liquid Glass Toggle, prêt à coller — et les 840 effets. Ou 299 € TTC une fois, accès à vie.
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
Taille (CSS — .lg-toggle { width: 72px; height: 36px }, .lg-toggle-knob { width: 30px; height: 30px }, .active .lg-toggle-knob { left: 39px }) |
piste 72 × 36 px, bille 30 px, course de 36 px | Le code vendu pose left: 39px en position allumée (la bille touche presque le bout). Pour une marge symétrique, calculez : largeur − bordures (2 px) − marge (3 px) − bille, soit 37 px ici. Pour 88 × 44 et une bille de 36 px : left: 47px. Gardez une hauteur de 44 px sur mobile pour une cible tactile confortable. |
Écrasement (CSS — @keyframes lgKnobSquish) |
0,5 s : 1,25 × 0,75 → 0,85 × 1,15 → 1,05 × 0,95 → 1 | 1,15 × 0,85 pour une bille plus ferme, 1,35 × 0,65 pour une goutte très molle. Gardez la même durée que la transition de left (0,5 s) pour que l'écrasement accompagne le trajet. |
Rebond du glissement (CSS — cubic-bezier(.34, 1.56, .64, 1)) |
dépassement d'environ 10 % de la course | Le 1,56 règle le dépassement : 1,2 pour un rebond discret, 1,8 pour une bille qui « tape » le bout de la piste. ease supprime le rebond. |
Couleur allumée (CSS — .lg-toggle.active) |
indigo à 20 %, bordure indigo à 40 % | Pour un état qu'on doit lire d'un coup d'œil : background: rgba(34,197,94,.55) (vert) ou votre couleur de marque à 50-60 %. La bille de verre reste lisible dessus. |
Décor derrière le verre (CSS — .lg-toggle-wrap, padding et background) |
deux disques nets (rose, indigo), hachures, fond nuit | Il rend le flou visible dans la démo. Sur votre page, retirez le padding et le background de la règle : l'interrupteur floutera votre image ou votre interface. |
FAQ
aria-checked ("true" ou "false") ou la classe .active, mis à jour à chaque bascule, au clic comme au clavier. Pour réagir : new MutationObserver(function () { var on = sw.getAttribute('aria-checked') === 'true'; /* … */ }).observe(sw, { attributes: true, attributeFilter: ['aria-checked'] }); — c'est ce que font les scènes de cette page pour allumer le chauffage, les sous-titres ou la vue satellite. Pour un état de départ allumé, écrivez class="lg-toggle active" et aria-checked="true" dans le HTML.toggle(), remplacerait toute fonction du même nom dans votre page — un menu, un thème — dès que le script de l'interrupteur serait chargé, ou serait remplacée par elle. Tout le script tient dans une boucle sur les éléments [data-lg-toggle], sans aucune déclaration au niveau global : rien n'est ajouté à window (mesuré : typeof window.toggle vaut undefined). Pour réagir à une bascule, observez aria-checked (voir la première question).<input type="checkbox" role="switch"> stylée donne gratuitement le clavier, le formulaire et l'étiquette par <label> : c'est le bon choix dans un formulaire envoyé au serveur. Cet interrupteur, lui, est un div rendu accessible (rôle, état, clavier) : il convient aux réglages appliqués tout de suite dans une interface, comme dans les trois scènes. Dans un formulaire, recopiez son état dans un champ caché, ou reprenez le CSS sur une vraie case à cocher.
