{ "$schema": "../../schema.json", "schema": "fundus/1", "id": "vollbild-overlay-menue-bildvorschau", "name": "Vollbild-Overlay-Menü mit Riesentypo und Bildvorschau", "name_en": "Fullscreen overlay menu with hover image reveal", "kurz": "Ein Wort öffnet eine dunkle Bühne: Riesige Links steigen aus ihren Masken, und jeder Hover zeigt sein Bild, als kippendes Cursor-Thumbnail, als vollflächiger Wipe oder als Daumen in der Zeile.", "kategorie": "Navigation", "kategorie_slug": "navigation", "kategorie_nr": 3, "bau_chat": "C3", "prioritaet": "A", "trendstatus": "etabliert", "belegstatus": "belegt", "website_belege": 3, "stimmung": [ "editorial", "luxuriös", "filmisch", "laut" ], "stimmung_roh": [ "editorial", "luxuriös", "laut", "kinematisch" ], "technik": [ "css", "gsap", "splittext", "vanilla-js", "dialog" ], "technik_gruppen": [ "css", "js", "gsap" ], "leistungskosten": "mittel", "steckbrief": { "beschreibung": "1) Ein Textknopf „Menü“ rechts oben öffnet eine Ebene über den ganzen Viewport. Der Knopf bleibt sichtbar und wird zu „Schließen“. 2) Die Ebene zeigt drei bis sechs Hauptlinks in sehr großer Schrift (etwa 8–14vw), oft nummeriert und mit hochgestellten Zählern. Daneben steht eine Spalte mit Kontakt, Adresse, Newsletter oder Social-Links. 3) Die Links steigen zeilenweise aus einer Maske auf (overflow: hidden, translateY 100 % → 0, gestaffelt). 4) Beim Hover erscheint ein Bild zum Link: als Thumbnail, das der Maus verzögert folgt und je nach Tempo kippt und aufhellt, als vollflächiger Hintergrund oder als kleines Bild in der Zeile. 5) Die übrigen Links treten zurück, der gezeigte steht im Fokus. 6) Geschlossen wird über den Knopf, mit Escape oder per Klick auf einen Link, meist mit Seitenübergang.", "warum_es_wirkt": "Die Navigation wird selbst zur Bühne und zum Markenmoment. Große Typo und Bildvorschau wecken für jeden Bereich eine Erwartung, bevor man klickt. Geschlossen ist die Navigation nur ein Wort, der Hero bleibt frei.", "wann_einsetzen": "Portfolios, Studios und Marken mit wenigen Hauptbereichen (bis etwa sieben) und starkem Bildmaterial. Passt zu Kulturinstitutionen, Mode und Architektur.", "wann_nicht": "Shops und Produktseiten mit tiefer Informationsarchitektur. Seiten, auf denen Nutzer oft zwischen vielen Unterseiten wechseln: Ein verstecktes Menü kostet jedes Mal einen Klick.", "varianten": [ "Cursor-Thumbnail: Das Bild folgt der Maus per Lerp, kippt und hellt auf, je schneller die Maus ist (Codrops-Technik)", "Hintergrund: Das Bild füllt die ganze Fläche und wechselt per Crossfade oder Clip-Wipe", "Daumenleiste: kleine Bilder direkt neben den Links (Lando Norris)", "Menü mit Newsletter-Feld und Kontakt-CTA (Lusion)", "Nummerierte Einträge mit hochgestellter Anzahl (basement.studio: Showcase 26, Blog 29)" ], "umsetzung": "Overlay als