{ "$schema": "../../schema.json", "schema": "fundus/1", "id": "wortmarke-wird-kopfmarke", "name": "Wortmarke wird Kopfmarke", "name_en": "Hero wordmark morphs into header logo (scroll and cross-document)", "kurz": "Der Name im Hero wird zur kleinen Marke im Kopf: beim Scrollen schrumpft er an seinen Platz, beim Seitenwechsel fliegt er als gemeinsames Element in den Kopf der Unterseite und beim Zurück wieder groß.", "kategorie": "Seitenübergänge", "kategorie_slug": "seitenuebergaenge", "kategorie_nr": 1, "bau_chat": "C3", "prioritaet": "A", "trendstatus": "aufsteigend", "belegstatus": "quellenbelegt", "website_belege": 0, "stimmung": [ "ruhig", "editorial", "laut" ], "stimmung_roh": [ "markenstark", "editorial", "ruhig" ], "technik": [ "css", "view-transitions", "scroll-driven-css", "@property", "vanilla-js" ], "technik_gruppen": [ "css", "js" ], "leistungskosten": "niedrig", "steckbrief": { "beschreibung": "Die große Wortmarke im Hero (der Name über die ganze Breite) wird zur kleinen Marke im Kopf. Beim Scrollen schrumpft sie gekoppelt an den Scroll in ihren Platz im Kopf. Beim Seitenwechsel fliegt sie als gemeinsames Element (view-transition-name) von der Startseite in den Kopf der Unterseite, beim Zurück wächst sie wieder. Es ist ein Element mit einem Namen für beide Wege. Dadurch wirkt der Seitenwechsel nicht wie ein flüchtiger Wischer: Man sieht, wohin die Marke geht.", "warum_es_wirkt": "Ein gemeinsames Element verbindet zwei Zustände: Das Auge folgt der Marke und weiß danach, dass es noch beim selben Haus ist. Die große Marke ist der stärkste Moment des ersten Bildschirms; statt sie wegzuscrollen, wird sie zur Kopfmarke und bleibt präsent. Die Bewegung hat einen klaren Weg (groß nach klein, Mitte nach oben links) und eine Dauer, die man wahrnimmt, statt in 150 ms vorbei zu sein.", "wann_einsetzen": "Wenn der Hero eine große Wortmarke hat (foto-hero-wortmarke, schrift-hero-viewportbreit) und die Seite mehrere echte Unterseiten hat. Hotel, Manufaktur, Bäckerei, Weingut, Region, Kultur, Studio. scroll für lange Startseiten, seitenwechsel für Seiten mit wenigen Hauptpunkten, beides für Marken, bei denen der Name das Bild ist.", "wann_nicht": "Nicht bei Bildmarken ohne Schriftzug oder sehr langen Namen, die im Kopf auf unter 14 px schrumpfen müssten. Nicht zusammen mit einem zweiten großen gemeinsamen Element im selben Wechsel (Bild-Morph), sonst konkurrieren zwei Wege. Nicht bei hide-on-scroll-header: die Marke braucht einen festen Platz. Gegen vt-shared-element-morph abgegrenzt: dort fliegt ein Inhaltsbild aus dem Raster in den Hero, hier fliegt die Marke aus dem Hero in den Kopf. Gegen sticky-shrink-header abgegrenzt: dort schrumpft der Kopf, hier wandert die Hero-Wortmarke selbst in den Kopf.", "varianten": [ "scroll: die Wortmarke schrumpft per Scroll-Zeitleiste in ihren Platz im Kopf; der Kopf bekommt seine Fläche und die dunkle Schrift erst, wenn sie fast angekommen ist", "seitenwechsel: Cross-Document View Transition zwischen zwei Seiten, die große Marke fliegt in den Kopf der Unterseite, beim Zurück umgekehrt", "beides: dieselbe Marke schrumpft beim Scrollen und fliegt beim Seitenwechsel aus jedem Zwischenstand in den Kopf" ], "umsetzung": "1) Beide Seiten: im Kopf. 2) Startseite: die Wortmarke ist ein Link im Kopf (Name), der oben in Hero-Größe steht. Ihre Größe kommt aus dem Einpassen (wie foto-hero-wortmarke), ihr Zielplatz aus einem leeren Platzhalter im Kopf. 3) scroll: @property --p () läuft per animation: marke-p linear both; animation-timeline: scroll(root); animation-range-start: 0; animation-range-end: var(--weg), wobei --weg der Abstand der Hero-Marke zu ihrem Platz im Kopf ist (so fährt die Marke genau mit der Seite hoch). Langform nach der Kurzschreibweise, die animation auf html sitzt, --p erbt an Marke und Kopf. Die Marke ist position: fixed, transform-origin: 0 0, und rechnet translate(calc(var(--dx) * var(--p)), calc(var(--dy) * var(--p))) scale(calc(1 + (var(--s) - 1) * var(--p))). --dx, --dy und --s misst JS bei Laden, Schriftladen und ResizeObserver. Rückfall: Scroll-Listener setzt --p. 4) seitenwechsel: Startseite und Unterseite geben ihrer sichtbaren Marke denselben Namen (view-transition-name: marke); dieselbe Schrift, dieselbe Laufweite in em und dieselbe Zeilenhöhe, damit das Seitenverhältnis stimmt. ::view-transition-group(marke) mit 900 ms und einer In-out-Kurve, damit der Weg sichtbar bleibt; die übrige Seite blendet in 300 ms aus und ab 350 ms ein. pageswap setzt Typen (hin/zurueck) aus navigation.activation bzw. e.activation. 5) beides: der Name sitzt immer auf der festen Marke, sie fliegt aus ihrem aktuellen Zwischenstand. 6) Reduziert: kein Morph, kein Schrumpfen; die Marke steht klein im Kopf, der Hero zeigt den Namen als statischen Schriftzug, Seiten wechseln ohne Übergang.", "mobil": "Die Wortmarke passt sich der Breite an (am Telefon um 80 bis 100 px hoch) und landet links im Kopf neben dem Menüknopf. Morph 750 ms statt 900 ms. Der Kopf bleibt 56 px hoch, die Marke nie unter 20 px.", "reduzierte_bewegung": "Kein Schrumpfen und kein Flug: Die Marke steht klein im Kopf, im Hero steht der Name als ruhiger Schriftzug. Seitenwechsel ohne View Transition (::view-transition-group(*) { animation: none }).", "barrierefreiheit": "Die Marke ist ein Link mit Text (Name, Ziel Startseite) im Kopf (banner). Wandert sie (scroll, beides), ist der Hero-Schriftzug dieselbe Marke, kein zweites Element. Steht sie im Fluss (seitenwechsel), ist die Kopfmarke inert und unsichtbar, bis die große Marke oben aus dem Bild ist. Das h1 der Seite bleibt eigener Text. Hero-Fläche mit dunklem Grund unter dem Foto, damit helle Schrift auch ohne Bild lesbar bleibt. Einpassen per ResizeObserver neu (Textabstände 1.4.12). Kontrastmodus: Marke in CanvasText." }, "messwerte": { "easing": "Scroll linear; Seitenwechsel cubic-bezier(0.76, 0, 0.24, 1) für die Marke, übrige Seite mit der Rezept-Kurve", "dauer_ms": "Marke 900 (Telefon 750); Seite aus 300, ein 450 ab 350", "stagger_ms": "", "distanz": "Hero-Größe (eingepasst auf die Breite, bei 1280 px 238 bis 346 px Schriftgröße) auf 24 bis 30 px im Kopf (Telefon 21 bis 26 px); Scrollweg bis zur Ankunft = Abstand Hero-Marke zu Kopfplatz, bei 1280 × 800 rund 370 bis 490 px", "sonstiges": "Ein Element, ein Name; Schnappschuss-Verhältnis gleich halten; Typen hin und zurueck", "herkunft": "eigene Festlegung", "quelle": "Bäckerei-Probe 04.11.2026 (Jury: Seitenwechsel nach 200 ms fertig, kein gemeinsames Element); Werte aus vt-shared-element-morph (In-out-Kurve) übernommen" }, "kurve": { "bezier": [ 0.76, 0.0, 0.24, 1.0 ], "css": "cubic-bezier(0.76, 0, 0.24, 1)", "name": "power3.inOut", "dauer_ms": 900 }, "gesehen_bei": [ { "seite": "Chrome for Developers: Cross-document view transitions for multi-page applications", "url": "https://developer.chrome.com/docs/web-platform/view-transitions/cross-document", "auszeichnung": "", "beobachtung": "Abgerufen 04.11.2026: Opt-in mit @view-transition { navigation: auto; } auf beiden Seiten, nur gleiche Origin. pageswap und pagereveal erlauben, view-transition-name kurz vor dem Schnappschuss zu setzen und danach zu entfernen. Unterstützt laut Seite Chrome und Edge ab 126 sowie Safari 18.2; Firefox dort nicht gelistet. Nach rund vier Sekunden Navigation wird der Übergang mit TimeoutError übersprungen.", "art": "artikel" }, { "seite": "MDN: animation-range-start", "url": "https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/animation-range-start", "auszeichnung": "", "beobachtung": "Abgerufen 04.11.2026: animation-range-start ist reset-only in der Kurzschreibweise animation; nach animation deklarieren. Gilt für die Scroll-Variante.", "art": "artikel" } ], "tutorials": [ { "titel": "Chrome for Developers: Cross-document view transitions", "url": "https://developer.chrome.com/docs/web-platform/view-transitions/cross-document" }, { "titel": "MDN: animation-range-start", "url": "https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/animation-range-start" } ], "kombinierbar_mit": [ "foto-hero-wortmarke", "schrift-hero-viewportbreit", "vt-cross-document-mpa", "richtungsbewusste-uebergaenge", "sticky-shrink-header", "intro-ohne-wartezeit", "footer-cta-riesen-wortmarke", "kapitel-kante-signatur" ], "urls": { "detail": "https://cecodesign.de/lab/fundus/seitenuebergaenge/wortmarke-wird-kopfmarke/", "meta": "https://cecodesign.de/lab/fundus/seitenuebergaenge/wortmarke-wird-kopfmarke/meta.json", "demo": "https://cecodesign.de/lab/fundus/seitenuebergaenge/wortmarke-wird-kopfmarke/demo" }, "herkunft": { "quelldateien": [ "Recherche Runde 4, 04.11.2026", "Bäckerei-Probe 04.11.2026 (JURY.md, PROBE-PROTOKOLL.md)" ], "pruefnotizen": [ "Jury Bäckerei 04.11.2026, Punkt 8: Seitenwechsel zu flüchtig (Ellipse nach rund 200 ms fertig), kein gemeinsames Element, „etwa die große Wortmarke, die beim Verlassen der Startseite zur kleinen Kopfmarke wird“.", "Probe-Protokoll Bäckerei, Abschnitt 5: „Wortmarke wandert in den Kopf … häufig bei Award-Seiten, fehlt im Fundus“. Kein Website-Beleg mit Messwerten geprüft.", "Cross-Document-Übergänge laufen nur bei gleicher Origin; in der Demo navigiert der Link wirklich auf dieselbe Datei mit ?seite=unter." ] }, "bau": { "status": "fertig", "kurz": "Der Name im Hero wird zur kleinen Marke im Kopf: beim Scrollen schrumpft er an seinen Platz, beim Seitenwechsel fliegt er als gemeinsames Element in den Kopf der Unterseite und beim Zurück wieder groß.", "demo": true, "abhaengigkeiten": [], "werte": { "opt_in": " im Kopf beider Seiten (Demo: dieselbe Datei mit ?seite=unter, echte Navigation); @media (prefers-reduced-motion: reduce) { @view-transition { navigation: none } }", "render_sperre": " +