Biblioteca
Navigationsleiste, die beim Scrollen zu Glas wird
Der große Titel blendet aus und die Leiste wird zu Milchglas, sobald Inhalt darunter scrollt.
Einstellungen
Code
<div class="uv-gsn"><header><span class="sm">Mediathek</span><button type="button" aria-label="Hinzufügen"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg></button></header><div class="sc" tabindex="0" aria-label="Mediathek"><h3 class="lg">Mediathek</h3><div class="it" style="--h:0"><i></i><span><b></b><b></b></span></div><div class="it" style="--h:47"><i></i><span><b></b><b></b></span></div><div class="it" style="--h:94"><i></i><span><b></b><b></b></span></div><div class="it" style="--h:141"><i></i><span><b></b><b></b></span></div><div class="it" style="--h:188"><i></i><span><b></b><b></b></span></div><div class="it" style="--h:235"><i></i><span><b></b><b></b></span></div><div class="it" style="--h:282"><i></i><span><b></b><b></b></span></div><div class="it" style="--h:329"><i></i><span><b></b><b></b></span></div></div></div>Prompt für KI
Füg ihn in ChatGPT, Claude oder Cursor ein und der Baustein wird mit diesen Einstellungen an dein Projekt angepasst, auch ohne React.
Mehr aus Liquid Glass
Alle ansehen: Liquid GlassWofür du ihn nutzen kannst
Große Titel, die zu einer kompakten Glasleiste zusammenfallen, sind ein Markenzeichen moderner Mobile-Apps. Oben in dieser Liste ist die Kopfzeile unsichtbar und ein großer fetter Titel steht da. Sobald Inhalt darunter scrollt, verwischt die Leiste, was durchläuft, bekommt eine feine Trennlinie und der kleine zentrierte Titel blendet ein.
Ein winziges Skript setzt nur ab einer Scroll-Schwelle eine Klasse, die ganze Optik passiert in CSS. Die Demo scrollt einmal runter und zurück, um den Effekt zu zeigen, und Unschärfe und Tönung bestimmen, wie stark die Leiste mattiert wird.