Frosted Glass Navbar
Une barre de navigation givrée collée en haut d'une zone qui défile : au repos, flou de 12 px et voile blanc à 8 % ; dès 10 px de défilement, le verre s'épaissit — flou de 24 px, saturation ×2, voile à 15 % — en 0,4 s, pour que le texte qui passe dessous ne gêne plus la lecture des liens.
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
Une zone .lg-navbar-scene de 280 × 180 px (coins de 12 px, dégradé indigo à 160°) que le script passe en overflow: auto, une barre .lg-frosted-nav de 38 px en tête, et le contenu dessous. La barre est une vitre : backdrop-filter: blur(12px) saturate(1.6) (avec sa forme -webkit-), fond blanc à 8 %, filet blanc à 12 % en bas. Elle est en position: sticky; top: 0 avec margin-bottom: -38px : elle reste en haut de la zone pendant tout le défilement, et la marge négative la fait passer par-dessus le contenu au lieu de le pousser — le texte glisse donc sous le verre. Le contenu garde 50 px de marge haute pour ne pas démarrer caché.
Le script (7 lignes, aucune dépendance) parcourt chaque [data-navbar-scene] de la page, écoute son défilement et ajoute la classe .scrolled à la barre dès que scrollTop dépasse 10 px, la retire en dessous. .scrolled double le flou (24 px), pousse la saturation à 2, monte le voile à 15 % et le filet à 20 % ; la transition de 0,4 s porte sur backdrop-filter et background. Mesuré 150 ms après le passage du seuil : flou de 19,4 px et saturation 1,85 dans Chromium 151 et Firefox 153, 19,1 px dans WebKit 26.5 — les trois navigateurs interpolent le flou ; à 600 ms, 24 px partout ; revenu à 5 px de défilement, la classe tombe. Le script ajoute aussi 120 px de marge basse au contenu, ce qui donne à la démo une course de 90 px.
Pourquoi position: sticky avec une marge négative, et pas position: absolute : dans une zone qui défile, un élément absolu est placé par rapport au contenu de la zone et défile avec lui. Mesuré dans une page vierge, une barre absolue serait remontée de 60 px à 60 px de défilement, hors de la zone, et de 90 px en bout de course — le verre épaissi ne se verrait qu'entre 10 et 38 px, puis la barre disparaîtrait avec ses liens. Collante, elle reste à 0 px du haut à 0, 60 et 90 px de défilement, dans Chromium, Firefox et WebKit ; la marge de −38 px la fait flotter au-dessus du contenu au lieu de le pousser.
Accessibilité
- Liens : les trois entrées « Home / About / Contact » sont des
span(cursor: default) : mesuré, aucune ne reçoit le focus au clavier et un lecteur d'écran ne les annonce pas comme des liens. Dans votre site, remplacez-les par des<a href>dans un<nav aria-label="Principal">, ajoutez un style:focus-visible(contour blanc de 2 px) et marquez la page courante d'unaria-current="page". - Taille et contraste du texte : les liens font 8,8 px (
.55rem) et la marque 11,2 px — trop petit pour une navigation ; passez-les à 12-14 px. Liens en blanc à 80 % : 6,5:1 au repos sur le violet#312e81, 5,4:1 une fois la barre épaissie, mais 4,1:1 puis 3,6:1 sur la partie#4f46e5du dégradé. Le voile plus blanc baisse un peu le contraste sur un fond uni ; ce qu'il gagne, c'est que le texte qui défile dessous devient une tache floue au lieu de lettres qui se superposent aux liens. - Mouvement : la transition de 0,4 s ne se déclenche qu'au défilement, à la demande du lecteur. L'indice « Scroll me » clignote en revanche sans fin (opacité 0,4 ↔ 0,9 toutes les 2 s) : ajoutez
@media (prefers-reduced-motion: reduce) { .lg-navbar-scroll-hint { animation: none } }, ou supprimez-le. Son texte de 8 px en blanc à 40 % est par ailleurs illisible : 2,3:1 au mieux sur le bas du dégradé, 1,6:1 sur sa partie la plus claire (#818cf8). - Zone qui défile : dans la démo, c'est la zone de 180 px qui défile, pas la page. Firefox et Safari ne lui donnent le focus clavier qu'avec
tabindex="0"; sur votre site, appliquez plutôt l'effet au défilement de la page entière (voir la FAQ), que le clavier sait déjà faire défiler. - Transparence réduite : rien n'est prévu pour
prefers-reduced-transparency; un fond plein y rendrait les liens lisibles quel que soit le contenu dessous :.lg-frosted-nav, .lg-frosted-nav.scrolled { background: #1e1b4b; backdrop-filter: none }.
Compatibilité navigateur
CSS : backdrop-filter (et -webkit-backdrop-filter), transition sur backdrop-filter, position: sticky, dégradé linéaire, animation d'opacité. JS : querySelectorAll, addEventListener('scroll'), classList. Zéro dépendance. Mesuré dans Chromium 151, Firefox 153 et WebKit 26.5 : barre collée en haut de bout en bout, classe .scrolled posée au-delà de 10 px et retirée en dessous, flou interpolé de 12 à 24 px dans les trois, aucune erreur console.
Sans backdrop-filter (Firefox avant 103, Chrome avant 76), la barre reste un voile blanc à 8 % puis 15 % sans flou : l'épaississement se voit encore, mais le texte qui passe dessous reste net. Pour ces navigateurs, donnez à .scrolled un fond plus opaque dans @supports not (backdrop-filter: blur(1px)). position: sticky existe depuis 2017 (Chrome 56, Firefox 59, Safari 13).
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec Premium) :
<div class="demo-preview">
<div class="lg-navbar-scene" data-navbar-scene="">
<div class="lg-frosted-nav">
<span class="lg-nav-brand">…</span>
<div class="lg-nav-items">
<span>…</span>
<span>…</span>
<span>…</span>
</div>
</div>
<div class="lg-navbar-content">…</div>
<div class="lg-navbar-scroll-hint">…</div>
</div>
</div>Le code complet HTML + CSS + JS de Frosted Glass Navbar, 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 |
|---|---|---|
Seuil de déclenchement (JS — e.scrollTop > 10) |
10 px | Plus haut (par exemple la hauteur de votre photo d'en-tête, 250 px), la barre reste légère tant que la photo est sous elle et ne s'épaissit qu'à l'arrivée du texte. 0 la fait réagir au premier pixel. |
Verre au repos et épaissi (CSS — .lg-frosted-nav et .lg-frosted-nav.scrolled) |
repos : blur 12 px, saturate 1,6, blanc 8 % ; épaissi : blur 24 px, saturate 2, blanc 15 % | Changez backdrop-filter et -webkit-backdrop-filter ensemble. Sur une page claire, teintez l'état épaissi en sombre (background: rgba(43,42,38,.55)) ou passez les liens en couleur foncée. Un écart plus grand entre les deux états (8 px → 30 px) rend le changement plus visible. |
Durée de la transition (CSS — transition: backdrop-filter .4s, background .4s) |
0,4 s | 0,2 s pour un changement presque immédiat, 0,8 s pour un épaississement lent. Ajoutez border-bottom-color à la liste pour que le filet suive au même rythme. |
Hauteur de la barre (CSS — height: 38px, margin-bottom: -38px) |
38 px | Gardez toujours la marge basse égale à moins la hauteur : 46 px de haut, margin-bottom: -46px. Sinon la barre pousse le contenu vers le bas, et plus rien ne passe sous le verre au départ. |
Liens, survol et page active (CSS — .lg-nav-items span) |
8,8 px, blanc à 80 %, survol en blanc pur | Pour retrouver le style de Glass Navigation (fx-0303) : padding: 6px 12px; border-radius: 8px, survol background: rgba(255,255,255,.1), page courante en pastille background: rgba(139,92,246,.3); border: 1px solid rgba(139,92,246,.4). Passez les span en a pour le clavier. |
Indice « Scroll me » (HTML + CSS — .lg-navbar-scroll-hint) |
8 px, blanc à 40 %, clignote toutes les 2 s, défile avec le contenu | Il n'a de sens que dans la petite zone de démo : supprimez la balise et la @keyframes lgScrollHintPulse sur un vrai site. |
FAQ
position: sticky; top: 0 (ou fixed) avec z-index au-dessus du contenu, gardez les deux états CSS, et remplacez le script par : var n = document.querySelector('.lg-frosted-nav'); addEventListener('scroll', function () { n.classList.toggle('scrolled', scrollY > 10) }, { passive: true });. Retirez data-navbar-scene et le overflow: auto en ligne de la zone, qui sinon défilerait toute seule. Mesuré dans Chromium et Firefox sur une page de 3 000 px : après 600 px de molette, barre à 0 px du haut, classe .scrolled posée, flou à 24 px. Pour que le contenu passe sous la barre dès le haut de page, utilisez une marge basse négative (comme ici) ou un en-tête fixed avec une photo d'ouverture qui monte jusqu'en haut.position: absolute à l'intérieur de la zone qui défile serait placée par rapport au contenu de cette zone, pas par rapport à sa fenêtre visible : elle défilerait avec le texte. Mesuré : à 60 px de défilement, une barre absolue est 60 px plus haut, hors de la zone — le verre épaissi, la raison d'être de l'effet, ne se verrait qu'entre 10 et 38 px. position: sticky la garde collée en haut de la zone, et la marge négative de 38 px la laisse flotter au-dessus du contenu. Si vous changez la hauteur de la barre, changez la marge avec elle.<button> (atteignables au clavier) qui prennent un fond blanc à 10 % au survol, et une entrée active en pastille violette — mais elle ne réagit à rien d'autre que le survol, et son flou n'a pas de forme -webkit- pour Safari avant 18. Frosted Glass Navbar fait la même barre de verre, pleine largeur, et y ajoute ce qui compte sur une vraie page : le verre qui s'épaissit quand le contenu passe dessous. Cette page couvre les deux : pour retrouver les pastilles et le survol de fx-0303, voir « Liens, survol et page active » dans le tableau ; les scènes de cette page les utilisent.
