{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "scroll-hinweis",
 "name": "Scroll-Hinweis, der verschwindet",
 "name_en": "Scroll cue that fades on first scroll",
 "kurz": "Unter dem Weinberg-Hero eines Weinguts nennt ein kleiner Link das Ziel, ein Punkt wandert dreimal und steht dann, beim ersten Scrollen blendet der Hinweis aus und verlässt die Tab-Reihenfolge.",
 "kategorie": "Scroll & Section-Animationen",
 "kategorie_slug": "scroll",
 "kategorie_nr": 5,
 "bau_chat": "C2",
 "prioritaet": "B",
 "trendstatus": "etabliert",
 "belegstatus": "quellenbelegt",
 "website_belege": 0,
 "stimmung": [
  "ruhig"
 ],
 "stimmung_roh": [
  "ruhig",
  "fein",
  "unaufdringlich"
 ],
 "technik": [
  "css",
  "scroll-driven-animations",
  "vanilla-js"
 ],
 "technik_gruppen": [
  "css",
  "js",
  "andere"
 ],
 "leistungskosten": "sehr niedrig",
 "steckbrief": {
  "beschreibung": "Ein dezenter Hinweis unten im Hero sagt, dass es weitergeht, und nennt, wohin: „Weiter zu den Lagen“. Er ist ein echter Link zum nächsten Abschnitt. Eine kurze Bewegung läuft höchstens dreimal und steht dann still. Beim ersten Scrollen blendet der Hinweis aus, gesteuert über animation-timeline: scroll() mit Rückfall per JS, und ist danach nicht mehr fokussierbar. Varianten: Linie mit wanderndem Punkt, angeschnittener nächster Abschnitt nach NN/g, Hinweis passend zum Gerät (Mausrad oder Wischen).",
  "warum_es_wirkt": "Ein bildschirmfüllender Hero wirkt wie eine fertige Seite (Illusion of Completeness). Ein Hinweis mit Ziel beantwortet „gibt es mehr?“ und „was kommt?“ in einem. Weil er beim ersten Scrollen geht, stört er niemanden, der es schon weiß. Ein Ziel im Text ist hilfreicher als ein Pfeil allein.",
  "wann_einsetzen": "Bildstarke Startseiten mit vollem Hero: Weingut, Hotel, Eventlocation, Fotografie, Kreativstudio, Freizeit. Auch auf langen Projektseiten nach einem Titelbild.",
  "wann_nicht": "Wenn der Hero nicht den ganzen Bildschirm füllt und der nächste Abschnitt schon zu sehen ist: dann ist der angeschnittene Inhalt der Hinweis. Nicht auf Seiten, deren erster Bildschirm schon die Handlung enthält (Termin, Telefon). Kein dauernd hüpfender Pfeil.",
  "varianten": [
   "Linie: Label mit Ziel und senkrechter Linie, ein Punkt wandert dreimal",
   "Angeschnitten: der nächste Abschnitt ragt 7.5rem in den ersten Bildschirm, der Hinweis nennt ihn",
   "Gerät: Mausrad am Desktop, Wisch-Geste auf Touch"
  ],
  "umsetzung": "Der Hinweis ist ein <a href=\"#lagen\"> mit sichtbarem Text. Die kurze Bewegung läuft mit animation-iteration-count: 3 und steht dann. Ausblenden: @supports (animation-timeline: scroll()) { .hinweis { animation: weg linear both; animation-timeline: scroll(root); animation-range: 0 25vh } } mit Keyframes für opacity, translate und am Ende visibility: hidden (fällt aus der Tab-Reihenfolge). Ohne Unterstützung setzt ein einmaliger scroll-Listener (passiv) eine Klasse. Angeschnitten: Hero mit min-height: calc(100svh - 7rem), der nächste Abschnitt ragt hinein. Gerät: @media (hover: hover) and (pointer: fine) zeigt das Mausrad, (pointer: coarse) die Wisch-Geste.",
  "mobil": "Auf Touch heißt der Hinweis „Wischen“ bzw. zeigt eine Wisch-Geste; er sitzt über dem unteren Rand mit Abstand zu Browserleisten (svh, safe-area). Trefferfläche mindestens 44 px.",
  "reduzierte_bewegung": "Keine Schleife: Punkt und Geste stehen still. Das Ausblenden beim Scrollen bleibt, weil es dem Scrollen folgt und keine eigene Bewegung ist.",
  "barrierefreiheit": "Echter Link mit Ziel im Text, kein aria-hidden-Pfeil ohne Funktion. Bewegung unter 5 s (dreimal 1,6 s), danach still (WCAG 2.2.2). Nach dem Ausblenden visibility: hidden, damit der Fokus nicht ins Unsichtbare springt. Text mindestens 4,5 : 1 auf dem Foto, deshalb mit Fläche oder Verlauf dahinter."
 },
 "messwerte": {
  "easing": "cubic-bezier(0.37, 0, 0.63, 1)",
  "dauer_ms": "1600 je Durchlauf, 3 Durchläufe",
  "stagger_ms": "",
  "distanz": "Punkt 40 px, Ausblenden 12 px nach oben über 25vh Scrollweg",
  "sonstiges": "Erscheint 600 ms nach dem Laden",
  "herkunft": "eigene Festlegung",
  "quelle": "Rezept weingut-hofladen-herkunft (token-luxus-weich)"
 },
 "kurve": {
  "bezier": [
   0.37,
   0.0,
   0.63,
   1.0
  ],
  "css": "cubic-bezier(0.37, 0, 0.63, 1)",
  "name": "sine.inOut",
  "dauer_ms": 1600
 },
 "gesehen_bei": [
  {
   "seite": "Nielsen Norman Group: The Illusion of Completeness",
   "url": "https://www.nngroup.com/articles/illusion-of-completeness/",
   "auszeichnung": "",
   "beobachtung": "Abgerufen 04.11.2026 (Kim Flaherty, 17.01.2016): Große Hero-Bilder lassen eine Seite fertig wirken. Empfehlung: Inhalt soll über die Falz hinaus angeschnitten sichtbar sein. Scroll-Pfeile für senkrechtes Scrollen werden nicht ausdrücklich empfohlen.",
   "art": "artikel"
  },
  {
   "seite": "MDN: Firefox 159 release notes",
   "url": "https://developer.mozilla.org/Firefox/Releases/159",
   "auszeichnung": "",
   "beobachtung": "Laut Recherche Runde 4 (geöffnet 04.11.2026): scroll-getriebene Animationen ab Firefox 159 (27.10.2026) standardmäßig an, damit in allen Engines.",
   "art": "artikel"
  }
 ],
 "tutorials": [
  {
   "titel": "MDN: animation-timeline scroll()",
   "url": "https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timeline/scroll"
  },
  {
   "titel": "NN/g: The Illusion of Completeness",
   "url": "https://www.nngroup.com/articles/illusion-of-completeness/"
  }
 ],
 "kombinierbar_mit": [
  "foto-hero",
  "cinematic-video-hero",
  "hide-on-scroll-header",
  "scroll-fortschritt",
  "smooth-scroll-lenis",
  "css-view-reveal-nativ",
  "foto-hero-wortmarke"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/scroll/scroll-hinweis/",
  "meta": "https://cecodesign.de/lab/fundus/scroll/scroll-hinweis/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/scroll/scroll-hinweis/demo"
 },
 "herkunft": {
  "quelldateien": [
   "Recherche Runde 4, 04.11.2026"
  ],
  "pruefnotizen": [
   "Recherche Runde 4 (04.11.2026): 18 Demos im Fundus bauen einen Scroll-Hinweis, jeder anders, kein Muster.",
   "Belege 04.11.2026: NN/g geöffnet. Awwwards-Einträge zu Weingütern zeigen in der Beschreibung keinen Scroll-Hinweis; Website-Belege im Browser suchen."
  ]
 },
 "bau": {
  "status": "fertig",
  "kurz": "Unter dem Weinberg-Hero eines Weinguts nennt ein kleiner Link das Ziel, ein Punkt wandert dreimal und steht dann, beim ersten Scrollen blendet der Hinweis aus und verlässt die Tab-Reihenfolge.",
  "demo": true,
  "abhaengigkeiten": [],
  "werte": {
   "easing": "cubic-bezier(0.37, 0, 0.63, 1) (token-luxus-weich)",
   "dauer_ms": {
    "puls": 1600,
    "durchlaeufe": 3,
    "puls_start": 1200,
    "auftritt": 600,
    "auftritt_verzoegerung": 600,
    "ui": 150
   },
   "distanz": "Punkt 40 px auf 56 px Linie, Mausrad 7 px, Wisch-Geste 14 → −14 px, Pfeil 5 px; Ausblenden translate 0 → −12 px",
   "ausblenden": "animation-timeline: scroll(root block); animation-range: 0 25vh; Keyframes opacity 1 → 0, am Ende visibility: hidden",
   "rueckfall": "ohne scroll-getriebene Animationen: passiver scroll-Listener, Klasse .weg ab scrollY > 40, Übergang 300 ms",
   "angeschnitten": "Hero min-height calc(100svh − 7.5rem), der nächste Abschnitt ragt 7.5rem hinein",
   "geraet": "@media (hover: none), (pointer: coarse) zeigt Wisch-Geste und „Wischen“, sonst Maus und „Scrollen“",
   "klick": "Link zu #lagen, scrollIntoView und Fokus auf den Abschnitt (tabindex=-1)",
   "farben": "Kalk #F1ECE2, Text #22211F, leise #5A564F, Schiefer #2F3236, Buntsandstein #8A3A2B (Punkt, Rad, Kaufen)",
   "schrift": "EB Garamond für h1 und Text, DM Mono 500 0.75rem versal +0.1em für den Hinweis"
  },
  "ausloeser": "scroll",
  "touch": "Unter 820 px liegt das Foto vollflächig, Text und Hinweis in Kalk auf dunklem Verlauf; die Variante Gerät zeigt „Wischen“ mit Fingergeste auf einer Kalk-Fläche. Trefferfläche 44 px.",
  "reduziert": "Kein Punkt, kein Rad, keine Geste und kein Auftritt: der Hinweis steht still (Punkt fest auf halber Linie). Das Ausblenden beim Scrollen bleibt, weil es dem Scrollen folgt.",
  "korrekturen": {
   "varianten": [
    "Linie: Label mit Ziel und senkrechter Linie, ein Punkt wandert dreimal",
    "Angeschnitten: der nächste Abschnitt ragt 7.5rem in den ersten Bildschirm, der Hinweis nennt ihn",
    "Gerät: Mausrad am Desktop, Wisch-Geste auf Touch"
   ]
  },
  "geprueft": "04.11.2026",
  "notiz": "Welt: Rezept weingut-hofladen-herkunft, erfundenes Weingut Hellmich in Klingenberg am Main (Spätburgunder vom Buntsandstein, Lagen Kreuzleite, Sonnwendberg, Mühlwinkel erfunden). Hero als Teilung Kalk und Foto (foto-hero-weinberg-hoch.webp), darunter das Lagen-Kapitel auf Schiefer mit lagen-steckbrief-karte-*.webp. Die Vorführung wartet die drei Pulse ab, scrollt per Skript um 32 % der Höhe (der Hinweis geht) und wieder zurück. Lauf in Chromium mit animation-timeline geprüft; der JS-Rückfall ist nur im Code geprüft. Hinweis NN/g: angeschnittener Inhalt ist der stärkere Hinweis, deshalb die Variante Angeschnitten. Selbsturteil 4.",
  "varianten": [
   {
    "id": "linie",
    "name": "Linie mit wanderndem Punkt",
    "wann": "Hero mit vollem Bildschirm und ruhiger Typografie (weingut, hotel, fotograf, architektur).",
    "werte": {
     "ort": "unten links im Textraster, bottom 34 px",
     "linie": "1 × 56 px, Punkt 6 px Buntsandstein"
    }
   },
   {
    "id": "angeschnitten",
    "name": "Angeschnittener nächster Abschnitt",
    "wann": "Wenn der Inhalt danach selbst lockt (Lagen, Zimmer, Programm) und der Hero nicht alles verdecken soll (eventlocation, hotel, kultur).",
    "werte": {
     "hero": "min-height calc(100svh − 7.5rem)",
     "hinweis": "Kreis 36 px mit Pfeil, nickt 5 px, dreimal"
    }
   },
   {
    "id": "geraet",
    "name": "Hinweis passend zum Gerät",
    "wann": "Bildflächige Heros über die ganze Breite, bei denen Touch-Besucher überwiegen (freizeit, eventlocation, kreativ).",
    "werte": {
     "ort": "unten rechts auf Kalk-Fläche, auf dem Telefon unten links",
     "desktop": "Maus 22 × 32 px mit Rad",
     "touch": "Fingerkreis wischt 28 px nach oben"
    }
   }
  ]
 }
}