{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "richtungsabhaengiger-marquee-hover",
 "name": "Richtungsabhängiger Marquee-Hover im Menü",
 "name_en": "Direction-aware marquee menu hover (K72 style) / Direction-aware marquee menu hover",
 "kurz": "Der Menüpunkt deckt beim Hover ein Laufband mit Gerichten auf, und zwar von genau der Kante, über die die Maus hereinkam.",
 "kategorie": "Navigation",
 "kategorie_slug": "navigation",
 "kategorie_nr": 3,
 "bau_chat": "C3",
 "prioritaet": "B",
 "trendstatus": "etabliert",
 "belegstatus": "belegt",
 "website_belege": 2,
 "stimmung": [
  "verspielt",
  "laut"
 ],
 "stimmung_roh": [
  "laut",
  "verspielt",
  "energiegeladen",
  "agenturhaft"
 ],
 "technik": [
  "gsap",
  "css",
  "vanilla-js"
 ],
 "technik_gruppen": [
  "css",
  "js",
  "gsap"
 ],
 "leistungskosten": "mittel",
 "steckbrief": {
  "beschreibung": "1) Jeder Menüeintrag trägt eine verborgene Ebene mit einem Laufband aus Text und kleinen Bildern. 2) Beim Betreten wird ermittelt, ob die Maus über die obere oder die untere Kante kam. 3) Die äußere Ebene fährt von dieser Kante herein, die innere gleichzeitig von der Gegenseite. So wirkt es wie ein Ausschnitt, der den Inhalt aufdeckt, statt ihn hereinzuschieben. 4) Beim Verlassen fährt die Ebene zur Austrittskante hinaus. 5) Das Laufband selbst läuft linear und ohne Pause.",
  "warum_es_wirkt": "Die Navigation antwortet auf die Bewegung der Hand und fühlt sich dadurch physisch an. Das Laufband bringt Energie und Bildwelt in eine reine Textliste. Der Menüpunkt wird für einen Moment zur Bühne.",
  "wann_einsetzen": "Vollbild-Menüs, Projektindexe und Kampagnenseiten mit drei bis sechs Einträgen. Passt zu Agenturen, Mode, Musik und zu Gastronomie mit Charakter, wo das Laufband Gerichte oder Getränke zeigen kann.",
  "wann_nicht": "Ruhige, seriöse Marken. Lange Listen und Shops, in denen schnelle Orientierung wichtiger ist als Wirkung. Seiten, die fast nur auf dem Telefon besucht werden.",
  "varianten": [
   "Text und kleine Bilder im Laufband (Demo: „Text + Bild“)",
   "Nur Text in Umkehrfarbe, Trenner statt Bilder (Demo: „Nur Text“)",
   "Nur Farbfläche ohne Laufband, der Eintrag erscheint in Umkehrfarbe (Demo: „Nur Fläche“)",
   "Richtung aus der Eintrittshälfte statt aus der nächstgelegenen Kante",
   "Reine CSS-Fassung ohne Richtungserkennung (Text-Marquee)",
   "Bildvorschau am Zeiger statt Laufband (siehe listen-hover-bildvorschau)"
  ],
  "umsetzung": "Aufbau pro Eintrag: .marquee (absolut über dem Eintrag, overflow: hidden) > .marquee__wrap > .marquee__spur. Die Spur enthält den Inhalt doppelt und läuft per CSS-Keyframes von translate3d(0) nach translate3d(−50 %), 15 s linear unendlich. Inhalt so oft wiederholen, dass eine Hälfte breiter ist als das Fenster. Kante bestimmen: (e.clientY − rect.top) < (rect.bottom − e.clientY) ergibt oben, sonst unten. Hereinfahren: gsap.timeline mit set (außen yPercent ±101, innen ∓101), dann beide auf 0, 600 ms expo.out. Hinausfahren: außen zur Austrittskante, innen gegenläufig. Laufende Tweens mit overwrite: true ersetzen, sonst flackert es bei schnellem Wechsel. Fallstrick: pageY und offsetTop brechen bei transformierten Eltern, deshalb getBoundingClientRect und clientY. Startlage per gsap.set mit y: 0 setzen, damit GSAP eine CSS-Startlage nicht doppelt einrechnet. Das Laufband nur im aktiven Eintrag laufen lassen (animation-play-state).",
  "mobil": "Ohne Hover bleiben die Einträge groß und statisch. Ein festes Bild je Eintrag ersetzt das Laufband. Optional zeigt ein Tipp die Ebene kurz von unten; für die echte Navigation den Tipp nicht verzögern.",
  "reduzierte_bewegung": "Kein Laufband, kein Hereinfahren. Der Eintrag wechselt beim Hover in Umkehrfarbe und blendet kurz ein.",
  "barrierefreiheit": "Die Laufband-Ebene ist ein Duplikat und bekommt aria-hidden. :focus-visible zeigt die Ebene genauso wie der Hover, zum Beispiel von unten. Das Laufband läuft nur, solange der Eintrag aktiv ist, und stoppt beim Verlassen (WCAG 2.2.2). Die Link-Texte bleiben echte, lesbare Menüeinträge."
 },
 "messwerte": {
  "easing": "expo",
  "dauer_ms": "600",
  "stagger_ms": "",
  "distanz": "Ebenen starten bei ±101 % bzw. ∓101 %",
  "sonstiges": "Marquee-Schleife 15 s linear unendlich, Verschiebung -50 % der doppelten Spur.",
  "herkunft": "beobachtet",
  "quelle": "https://tympanus.net/codrops/2021/06/30/how-to-code-the-k72-marquee-hover-animation/",
  "aus_eintrag": [
   "richtungsabhaengiger-marquee-hover"
  ]
 },
 "kurve": {
  "bezier": [
   0.16,
   1,
   0.3,
   1
  ],
  "css": "cubic-bezier(0.16, 1, 0.3, 1)",
  "name": "expo.out",
  "dauer_ms": 600
 },
 "gesehen_bei": [
  {
   "seite": "K72 (Locomotive) – nachgebaut auf Codrops",
   "url": "https://tympanus.net/codrops/2021/06/30/how-to-code-the-k72-marquee-hover-animation/",
   "auszeichnung": "",
   "beobachtung": "Original-Effekt der Agentur K72 von Locomotive; Codrops-Tutorial erklärt Kanten-Erkennung und Gegenbewegung.",
   "art": "artikel"
  },
  {
   "seite": "Awwwards Inspiration: K72 animated marquee text effect",
   "url": "https://www.awwwards.com/inspiration/k72-animated-marquee-text-effect",
   "auszeichnung": "Awwwards Inspiration (Element-Sammlung)",
   "beobachtung": "Nur Titel gesehen.",
   "art": "website-ungeprueft"
  },
  {
   "seite": "Locomotive",
   "url": "https://locomotive.ca/en",
   "auszeichnung": "Awwwards Site of the Month 03/2023 (laut SOTM-Liste)",
   "beobachtung": "Urheber-Agentur des K72-Projekts; eigene Seite mit klarer Textnavigation, Sprachlink und Standort.",
   "art": "website",
   "browser_gemessen": true
  },
  {
   "seite": "K72 (Agentur, Montréal)",
   "url": "https://k72.ca/",
   "auszeichnung": "",
   "beobachtung": "Menüeinträge mit wiederholten Phrasen (‚Pour tout voir‘) im Markup; Codrops hat den ‚direction-aware marquee menu hover‘ von ‚K72 by Locomotive‘ als Tutorial nachgebaut. Locomotive-Credit auf der Seite selbst nicht sichtbar.",
   "art": "website",
   "browser_gemessen": true
  }
 ],
 "tutorials": [
  {
   "titel": "Codrops: How to Code the K72 Marquee Hover Animation",
   "url": "https://tympanus.net/codrops/2021/06/30/how-to-code-the-k72-marquee-hover-animation/"
  },
  {
   "titel": "Codrops Tag ‚marquee‘",
   "url": "https://tympanus.net/codrops/tag/marquee/"
  }
 ],
 "kombinierbar_mit": [
  "vollbild-overlay-menue-bildvorschau",
  "listen-hover-bildvorschau",
  "text-roll-hover",
  "marquee-laufband"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/navigation/richtungsabhaengiger-marquee-hover/",
  "meta": "https://cecodesign.de/lab/fundus/navigation/richtungsabhaengiger-marquee-hover/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/navigation/richtungsabhaengiger-marquee-hover/demo"
 },
 "herkunft": {
  "quelldateien": [
   "navigation.json",
   "schriftanimation.json"
  ],
  "zusammengelegt_aus": [
   "richtungsabhaengiger-marquee-hover",
   "marquee-menu-hover"
  ],
  "querverweis_kategorien": [
   "Schrift-Animationen"
  ],
  "leistungskosten_spanne": "niedrig–mittel (je nach Variante)"
 },
 "bau": {
  "status": "fertig",
  "kurz": "Der Menüpunkt deckt beim Hover ein Laufband mit Gerichten auf, und zwar von genau der Kante, über die die Maus hereinkam.",
  "demo": true,
  "abhaengigkeiten": [
   "gsap@3.15.0"
  ],
  "werte": {
   "easing": "expo.out (GSAP), CSS-Gegenstück cubic-bezier(0.16, 1, 0.3, 1)",
   "dauer_ms": "600 für Hereinfahren und Hinausfahren",
   "distanz": "Außenebene startet bei yPercent ±101, Innenebene gegenläufig bei ∓101, beide fahren gleichzeitig auf 0",
   "kante": "nächstgelegene Kante: (clientY − rect.top) < (rect.bottom − clientY) ? oben : unten, mit getBoundingClientRect",
   "ueberschreiben": "overwrite: true, laufende Tweens werden bei schnellem Wechsel ersetzt",
   "laufband": "CSS-Keyframes translate3d(0 → −50 %), 15 s linear unendlich, läuft nur im aktiven Eintrag (animation-play-state)",
   "spur": "Inhalt so oft wiederholt, dass eine Hälfte breiter als das Fenster ist, dann verdoppelt",
   "typo": "Eintrag Fraunces 470, SOFT 100, min(clamp(2.5rem, 1rem + 5.8vw, 7.5rem), 11.6svh); Laufband Fraunces Italic 380 in 0,74 × Eintragsgröße; Teller 1,08 em",
   "farben": "Grund #f0ece0, Tinte #353839, Ebene #293e3a mit Papier-Text; Variante „Nur Fläche“ Senf #eac16e",
   "fokus": ":focus-visible zeigt die Ebene von unten",
   "touch_tipp": "Ebene von unten, nach 1400 ms nach oben hinaus",
   "reduziert_ueberblendung": "opacity 150 ms linear"
  },
  "ausloeser": "hover",
  "touch": "Kein Hover. Jeder Eintrag zeigt rechts ein festes Tellermotiv. Ein Tipp lässt die Ebene von unten hereinfahren, nach 1,4 s fährt sie nach oben wieder hinaus.",
  "reduziert": "Kein Laufband, kein Hereinfahren. Beim Hover blendet der Eintrag in Umkehrfarbe (Papier auf Dunkelgrün, mit Pfeil) in 150 ms ein.",
  "korrekturen": {
   "beschreibung": "1) Jeder Menüeintrag trägt eine verborgene Ebene mit einem Laufband aus Text und kleinen Bildern. 2) Beim Betreten wird ermittelt, ob die Maus über die obere oder die untere Kante kam. 3) Die äußere Ebene fährt von dieser Kante herein, die innere gleichzeitig von der Gegenseite. So wirkt es wie ein Ausschnitt, der den Inhalt aufdeckt, statt ihn hereinzuschieben. 4) Beim Verlassen fährt die Ebene zur Austrittskante hinaus. 5) Das Laufband selbst läuft linear und ohne Pause.",
   "warum_es_wirkt": "Die Navigation antwortet auf die Bewegung der Hand und fühlt sich dadurch physisch an. Das Laufband bringt Energie und Bildwelt in eine reine Textliste. Der Menüpunkt wird für einen Moment zur Bühne.",
   "wann_einsetzen": "Vollbild-Menüs, Projektindexe und Kampagnenseiten mit drei bis sechs Einträgen. Passt zu Agenturen, Mode, Musik und zu Gastronomie mit Charakter, wo das Laufband Gerichte oder Getränke zeigen kann.",
   "wann_nicht": "Ruhige, seriöse Marken. Lange Listen und Shops, in denen schnelle Orientierung wichtiger ist als Wirkung. Seiten, die fast nur auf dem Telefon besucht werden.",
   "varianten": [
    "Text und kleine Bilder im Laufband (Demo: „Text + Bild“)",
    "Nur Text in Umkehrfarbe, Trenner statt Bilder (Demo: „Nur Text“)",
    "Nur Farbfläche ohne Laufband, der Eintrag erscheint in Umkehrfarbe (Demo: „Nur Fläche“)",
    "Richtung aus der Eintrittshälfte statt aus der nächstgelegenen Kante",
    "Reine CSS-Fassung ohne Richtungserkennung (Text-Marquee)",
    "Bildvorschau am Zeiger statt Laufband (siehe listen-hover-bildvorschau)"
   ],
   "umsetzung": "Aufbau pro Eintrag: .marquee (absolut über dem Eintrag, overflow: hidden) > .marquee__wrap > .marquee__spur. Die Spur enthält den Inhalt doppelt und läuft per CSS-Keyframes von translate3d(0) nach translate3d(−50 %), 15 s linear unendlich. Inhalt so oft wiederholen, dass eine Hälfte breiter ist als das Fenster. Kante bestimmen: (e.clientY − rect.top) < (rect.bottom − e.clientY) ergibt oben, sonst unten. Hereinfahren: gsap.timeline mit set (außen yPercent ±101, innen ∓101), dann beide auf 0, 600 ms expo.out. Hinausfahren: außen zur Austrittskante, innen gegenläufig. Laufende Tweens mit overwrite: true ersetzen, sonst flackert es bei schnellem Wechsel. Fallstrick: pageY und offsetTop brechen bei transformierten Eltern, deshalb getBoundingClientRect und clientY. Startlage per gsap.set mit y: 0 setzen, damit GSAP eine CSS-Startlage nicht doppelt einrechnet. Das Laufband nur im aktiven Eintrag laufen lassen (animation-play-state).",
   "mobil": "Ohne Hover bleiben die Einträge groß und statisch. Ein festes Bild je Eintrag ersetzt das Laufband. Optional zeigt ein Tipp die Ebene kurz von unten; für die echte Navigation den Tipp nicht verzögern.",
   "reduzierte_bewegung": "Kein Laufband, kein Hereinfahren. Der Eintrag wechselt beim Hover in Umkehrfarbe und blendet kurz ein.",
   "barrierefreiheit": "Die Laufband-Ebene ist ein Duplikat und bekommt aria-hidden. :focus-visible zeigt die Ebene genauso wie der Hover, zum Beispiel von unten. Das Laufband läuft nur, solange der Eintrag aktiv ist, und stoppt beim Verlassen (WCAG 2.2.2). Die Link-Texte bleiben echte, lesbare Menüeinträge."
  },
  "geprueft": "01.11.2026",
  "notiz": "Vollbild-Menü des erfundenen Lokals Möwenkrog (Küche & Bar, Lübeck) im Rezept gastro-warm-appetitlich: Fraunces und Commissioner, Papier-Weiß, Dunkelgrün als Fläche, Senf als Akzent. Das Laufband zeigt Gerichte und Getränke mit eigenen SVG-Tellern statt Fotos. Umschalter für drei Varianten (Text + Bild, Nur Text, Nur Fläche), Werte und erkannte Eintrittskante werden live eingeblendet. Öffnungsstatus im Kopf wird aus den echten Zeiten berechnet (Rezeptregel). Die Vorführung fährt mit gedachtem Zeiger erst nach unten, dann nach oben durch das Menü, damit beide Richtungen sichtbar werden. Das Rezept passt, weil die Vorlage selbst Bildwelt im Menü verlangt; die laute Agentur-Stimmung wird durch die warme Palette gezähmt. AD-Review 01.11.2026: Note 5. Zugang 02.11.2026: --leise .62 → .72 (4,6:1); bei ≤ 360 px Kopf und Menüzeilen mit minmax(0, 1fr), Titel 2,05 rem, Marke 22 px, Wertezeile bricht um (kein Querscrollen); Bühne grid-template-columns minmax(0, 1fr); Knopf-Rahmen im Kontrastmodus."
 }
}