{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "daten-scrollytelling",
 "name": "Daten-Scrollytelling",
 "name_en": "Data scrollytelling with sticky chart",
 "kurz": "Ein Wirkungsbericht, dessen Diagramm sich beim Scrollen Schritt für Schritt aufbaut: Text links, klebende SVG-Grafik rechts, auf dem Telefon Grafik oben.",
 "kategorie": "Scroll & Section-Animationen",
 "kategorie_slug": "scroll",
 "kategorie_nr": 5,
 "bau_chat": "C2",
 "prioritaet": "F",
 "trendstatus": "etabliert",
 "belegstatus": "quellenbelegt",
 "website_belege": 0,
 "stimmung": [
  "editorial",
  "präzise",
  "filmisch"
 ],
 "stimmung_roh": [
  "erzählend",
  "erklärend",
  "vertrauenswürdig"
 ],
 "technik": [
  "css",
  "position-sticky",
  "intersection-observer",
  "svg",
  "scroll-driven-css",
  "vanilla-js"
 ],
 "technik_gruppen": [
  "css",
  "js",
  "canvas"
 ],
 "leistungskosten": "niedrig",
 "steckbrief": {
  "beschreibung": "Ein Diagramm baut sich beim Scrollen Schritt für Schritt auf. Links laufen kurze Textschritte durch, rechts bleibt die Grafik per position: sticky stehen. Jeder Schritt schaltet einen Zustand der Grafik: erst die Achse und die Ausgangslage, dann die ersten Balken, dann eine Markierung, am Ende das Ziel. Der Scroll löst die Schritte nur aus, er steuert keine Animation Bild für Bild. Auf dem Telefon steht die Grafik oben, die Schritte laufen als Karten darunter durch.",
  "warum_es_wirkt": "Eine Zahl allein bleibt abstrakt. Wenn der Leser selbst weiterscrollt und dabei sieht, wie die Balken wachsen, versteht er die Entwicklung und merkt sie sich. Text und Grafik erklären sich gegenseitig, ohne dass er zwischen ihnen springen muss. Weil der Leser das Tempo bestimmt, wirkt es nicht wie eine Präsentation, die abläuft.",
  "wann_einsetzen": "Wirkungsberichte von Vereinen und Stiftungen, Jahresberichte, Mittelverwendung, Kampagnen mit einer klaren Zahl, Kultur-Statistiken, SaaS-Seiten mit einem Vorher-Nachher. Eine Geschichte mit 3 bis 6 Schritten und echten Daten.",
  "wann_nicht": "Auf der Startseite vor dem Spenden- oder Kaufknopf (zwingt durch eine Inszenierung). Bei Daten, die man nachschlagen will (Tabelle, Preisliste). Mehr als zwei oder drei solcher Strecken pro Seite. Wenn es keine echten, belegbaren Zahlen gibt.",
  "varianten": [
   "Balken über die Zeit: Ausgangslage, Wachstum, heute, Ziel",
   "Mittelverwendung: 100 Felder für 100 €, jeder Schritt füllt einen Bereich",
   "Linie mit Markierungen (Ereignisse auf der Zeitachse)",
   "Karte statt Diagramm: Flächen färben sich Schritt für Schritt",
   "Scroll-gekoppelt: Fortschritt innerhalb eines Schritts per animation-timeline: view() statt fester Zustände"
  ],
  "umsetzung": "Zwei Spalten in einem Grid, Schritte und Grafik in derselben Zeile, damit position: sticky die ganze Strecke über greift (liegt die Grafik in einer eigenen Zeile, klebt sie nicht). Ein IntersectionObserver mit rootMargin '-50% 0px -49% 0px' meldet, welcher Schritt die Mitte kreuzt; auf dem Telefon liegt die Linie bei 70 %. Elemente im SVG tragen data-ab=\"n\" und bekommen ab Schritt n die Klasse .an. Die Klasse .lebt an der Grafik setzt JS nur, wenn Bewegung erlaubt ist; erst sie blendet die noch nicht erreichten Teile aus. Ohne JS und bei reduzierter Bewegung steht damit das vollständige Endbild. Balken wachsen per transform: scaleY mit transform-box: fill-box von der Grundlinie. Das SVG hat role=img mit title und desc; die Daten stehen als echte Tabelle nach den Schritten (für Screenreader immer, für alle per Knopf sichtbar). Schritthöhen in svh statt vh. Ein dünner Fortschrittsbalken nutzt animation-timeline mit view-timeline-name auf der Sektion, nur unter @supports.",
  "mobil": "Grafik klebt oben mit etwa halber Bildschirmhöhe, die Schritte laufen als Karten darunter durch und lösen bei 70 % der Höhe aus. Größere Schrift im SVG, nur jede zweite Jahreszahl. Tippen auf einen Balken zeigt den Wert.",
  "reduzierte_bewegung": "Statisches, vollständiges Endbild: alle Balken, Linien, Felder und Beschriftungen sind von Anfang an da. Die Textschritte bleiben lesbar und voll sichtbar, nichts animiert.",
  "barrierefreiheit": "SVG mit role=img, title und desc mit der Kernaussage; die Daten als echte Tabelle mit caption und th scope (für Screenreader immer im Dokument, per Knopf mit aria-expanded für alle sichtbar). Die Geschichte steht vollständig im Text der Schritte. Werte nie nur über Farbe: Beschriftung an den wichtigen Balken, Legende mit Beträgen, 2px Lücken zwischen den Feldern. Datenfarben mit 3 : 1 gegen Weiß. Keine Scroll-Kaperung, kein Einrasten, normales Scrollen bleibt. Beispieldaten sichtbar gekennzeichnet."
 },
 "messwerte": {
  "easing": "cubic-bezier(0.645, 0.045, 0.355, 1) (easeInOutCubic, Rezept verein-nonprofit-wirkung)",
  "dauer_ms": "900 Balken, 600 Beschriftungen, 200 Textschritt aktiv/inaktiv",
  "stagger_ms": "70 zwischen Balken eines Schritts",
  "distanz": "Balken scaleY 0 → 1 von der Grundlinie",
  "sonstiges": "Auslöselinie in der Mitte des Viewports (Desktop) bzw. bei 70 % (Telefon). Pudding: kein vh für Schritthöhen; hier svh.",
  "herkunft": "eigene Festlegung",
  "quelle": "https://pudding.cool/process/scrollytelling-sticky/"
 },
 "kurve": {
  "bezier": [
   0.645,
   0.045,
   0.355,
   1.0
  ],
  "css": "cubic-bezier(0.645, 0.045, 0.355, 1)",
  "name": "eigene Kurve",
  "dauer_ms": 900
 },
 "gesehen_bei": [
  {
   "seite": "The Pudding: Scrollytelling with sticky",
   "url": "https://pudding.cool/process/scrollytelling-sticky/",
   "auszeichnung": "",
   "beobachtung": "Elaina Natario und Russell Samora, Juni 2018: Grafik mit position: sticky statt Scroll-Listener, relativ zum Elternelement; JS löst nur die Schritte aus. Zwei Layouts: Grafik neben dem Text und Text über der Grafik. Ohne Unterstützung bleibt die Grafik statisch in der Quellreihenfolge.",
   "art": "tutorial"
  },
  {
   "seite": "The Pudding: An Introduction to Scrollama.js",
   "url": "https://pudding.cool/process/introducing-scrollama/",
   "auszeichnung": "",
   "beobachtung": "Russell Samora, November 2017: Schritt-Auslöser über IntersectionObserver statt Scroll-Events, dazu Fortschritt innerhalb eines Schritts (0 bis 100 %) und Hilfen für die klebende Grafik.",
   "art": "tutorial"
  },
  {
   "seite": "The Pudding: Responsive scrollytelling best practices",
   "url": "https://pudding.cool/process/responsive-scrollytelling/",
   "auszeichnung": "",
   "beobachtung": "Russell Samora, April 2017: Scroll-Format auf dem Telefon behalten, wenn die Übergänge Bedeutung tragen; keine Stepper oder Wischgesten; kein vh für Schritthöhen, weil die Browserleisten beim Scrollen die Höhe ändern; Breakpoints per matchMedia mit dem CSS synchron halten; Hover entfernen.",
   "art": "artikel"
  },
  {
   "seite": "The Plus Addons: Scrollytelling",
   "url": "https://theplusaddons.com/blog/scrollytelling/",
   "auszeichnung": "",
   "beobachtung": "Sagar Patel, 21.09.2026: drei Techniken (Reveal beim Eintritt, klebende Abschnitte, an den Scroll gekoppelt); höchstens zwei bis drei solcher Momente pro Seite; jede Scroll-Bewegung braucht einen prefers-reduced-motion-Ersatz; auf dem Telefon bewusst vereinfachen. Nennt The Pudding als Beispiel für klebende, an den Fortschritt gekoppelte Diagramme.",
   "art": "artikel"
  },
  {
   "seite": "How to implement scrollytelling with six different libraries",
   "url": "https://pudding.cool/process/how-to-implement-scrollytelling",
   "auszeichnung": "",
   "beobachtung": "Russell Samora, Januar 2017: dasselbe Diagramm mit sechs Bibliotheken; Muster „Text löst Zustand aus“, Grafik bleibt fest, bis die Strecke endet. Scrollytelling beobachtet den Scroll, statt ihn zu kapern.",
   "art": "tutorial"
  }
 ],
 "tutorials": [
  {
   "titel": "The Pudding: Scrollytelling with sticky",
   "url": "https://pudding.cool/process/scrollytelling-sticky/"
  },
  {
   "titel": "The Pudding: Responsive scrollytelling best practices",
   "url": "https://pudding.cool/process/responsive-scrollytelling/"
  },
  {
   "titel": "The Pudding: An Introduction to Scrollama.js",
   "url": "https://pudding.cool/process/introducing-scrollama/"
  }
 ],
 "kombinierbar_mit": [
  "zahlen-fakten-section",
  "zahlen-odometer",
  "split-screen-sticky-seiten",
  "tabellenziffern",
  "css-scroll-triggered",
  "svg-pfad-zeichnen-scroll"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/scroll/daten-scrollytelling/",
  "meta": "https://cecodesign.de/lab/fundus/scroll/daten-scrollytelling/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/scroll/daten-scrollytelling/demo"
 },
 "herkunft": {
  "quelldateien": [
   "DEF-Recherche 01.11.2026"
  ],
  "pruefnotizen": [
   "Technik belegt durch The Pudding (Tutorials 2017 und 2018) und einen Fachartikel von September 2026; eine aktuelle Vereins- oder Kundenseite mit diesem Muster fehlt noch als Produktionsbeleg.",
   "Alle Zahlen in der Demo sind erfunden und als Beispieldaten gekennzeichnet."
  ]
 },
 "bau": {
  "status": "fertig",
  "kurz": "Ein Wirkungsbericht, dessen Diagramm sich beim Scrollen Schritt für Schritt aufbaut: Text links, klebende SVG-Grafik rechts, auf dem Telefon Grafik oben.",
  "demo": true,
  "abhaengigkeiten": [],
  "werte": {
   "easing": "cubic-bezier(0.645, 0.045, 0.355, 1) (easeInOutCubic aus dem Rezept) für Balken, Beschriftungen und Waffelfelder; Textschritte und Knöpfe 180 ms linear, Spendenknopf 150 ms linear",
   "dauer_ms": "900 Balken, 600 Beschriftungen (starten nach 540 ms, also 60 % der Balkendauer), 420 je Waffelfeld, 180 Schritt aktiv/inaktiv",
   "stagger_ms": "70 zwischen Balken bzw. Legendenzeilen einer Stufe, 9 je Waffelfeld",
   "distanz": "Balken transform: scaleY(0) → 1, transform-box: fill-box, transform-origin 50% 100%",
   "ausloeser_linie": "IntersectionObserver rootMargin '-50% 0px -49% 0px' (Desktop), '-70% 0px -29% 0px' unter 800 px; Umschalten per matchMedia",
   "layout": "Desktop: Schritte 5fr, Grafik 7fr, beide in derselben Grid-Zeile; Grafik position: sticky, top 72px (Kopfhöhe), height calc(100svh - 72px). Schritte min-height 72svh, Liste mit padding 30svh oben, 40svh unten, inaktive Schritte opacity .32. Telefon: Grafik sticky top 68px mit Schatten, Schritte als Karten mit padding-top 54svh, min-height 64svh",
   "diagramm": "SVG viewBox 640 × 412, Balken 22px breit, 4px gerundet oben, Hilfslinien 1px #e1e6e4, Grundlinie 1px #222520, Ziel 1.5px gestrichelt 6/4, geplante Balken als gestrichelte Kontur 3/3; Beschriftung nur an 2020, 2023 und 2025",
   "waffel": "10 × 10 Felder à 32px mit 2px Lücke, rx 3, füllt sich von unten links; leer #e4ebe9",
   "farben": "Marke #0b3c49, helle Fläche #edf4f3, Text #222520, Signal #ffca0a nur für Spenden; Datenfarben (mit dem Palettentest geprüft, alle Prüfungen bestanden): Fläche #008a9e, Messung #d06a2c, Bildung #4a7fd6, Verwaltung #5f9e2f, Werbung #b05aa0",
   "schrift": "Big Shoulders 800 versal für Titel (h1 clamp(2.75rem, 1.6rem + 5vw, 6rem), Schritte clamp(2rem, 1.3rem + 2.4vw, 3.4rem), Zeilenhöhe .95); Archivo 1.0625rem/1.6 für Text, Tabellenziffern im Diagramm",
   "fortschritt": "2px-Balken über der Grafik, animation-timeline: --strecke (view-timeline-name der Sektion), animation-range contain 0% bis contain 100%, nur unter @supports (animation-timeline: view())",
   "vorfuehrung": "nach 700 ms zum ersten Schritt gleiten (1100 ms), danach je Schritt 900 ms gleiten, 1500 ms halten; nach dem letzten 2200 ms, dann von vorn"
  },
  "ausloeser": "scroll",
  "touch": "Unter 800 px steht die Grafik klebend oben (etwa halbe Höhe, weißer Grund, Schatten), die Schritte laufen als Karten darunter durch und lösen bei 70 % der Höhe aus. Im SVG größere Schrift (19px in Viewbox-Einheiten), nur jede zweite Jahreszahl. Tippen auf einen Balken zeigt den Wert. Waffel und Legende nebeneinander in zwei Spalten.",
  "reduziert": "Statisches, vollständiges Endbild von Anfang an: alle Balken, Referenz- und Ziellinie, Beschriftungen, alle 100 Felder und die ganze Legende. Kein Fortschrittsbalken, keine Übergänge; alle Textschritte voll sichtbar. Die Vorführung springt ohne Gleiten.",
  "korrekturen": {
   "umsetzung": "Zwei Spalten in einem Grid, Schritte und Grafik in derselben Zeile, damit position: sticky die ganze Strecke über greift (liegt die Grafik in einer eigenen Zeile, klebt sie nicht). Ein IntersectionObserver mit rootMargin '-50% 0px -49% 0px' meldet, welcher Schritt die Mitte kreuzt; auf dem Telefon liegt die Linie bei 70 %. Elemente im SVG tragen data-ab=\"n\" und bekommen ab Schritt n die Klasse .an. Die Klasse .lebt an der Grafik setzt JS nur, wenn Bewegung erlaubt ist; erst sie blendet die noch nicht erreichten Teile aus. Ohne JS und bei reduzierter Bewegung steht damit das vollständige Endbild. Balken wachsen per transform: scaleY mit transform-box: fill-box von der Grundlinie. Das SVG hat role=img mit title und desc; die Daten stehen als echte Tabelle nach den Schritten (für Screenreader immer, für alle per Knopf sichtbar). Schritthöhen in svh statt vh. Ein dünner Fortschrittsbalken nutzt animation-timeline mit view-timeline-name auf der Sektion, nur unter @supports.",
   "mobil": "Grafik klebt oben mit etwa halber Bildschirmhöhe, die Schritte laufen als Karten darunter durch und lösen bei 70 % der Höhe aus. Größere Schrift im SVG, nur jede zweite Jahreszahl. Tippen auf einen Balken zeigt den Wert.",
   "reduzierte_bewegung": "Statisches, vollständiges Endbild: alle Balken, Linien, Felder und Beschriftungen sind von Anfang an da. Die Textschritte bleiben lesbar und voll sichtbar, nichts animiert.",
   "barrierefreiheit": "SVG mit role=img, title und desc mit der Kernaussage; die Daten als echte Tabelle mit caption und th scope (für Screenreader immer im Dokument, per Knopf mit aria-expanded für alle sichtbar). Die Geschichte steht vollständig im Text der Schritte. Werte nie nur über Farbe: Beschriftung an den wichtigen Balken, Legende mit Beträgen, 2px Lücken zwischen den Feldern. Datenfarben mit 3 : 1 gegen Weiß. Keine Scroll-Kaperung, kein Einrasten, normales Scrollen bleibt. Beispieldaten sichtbar gekennzeichnet."
  },
  "geprueft": "02.11.2026",
  "notiz": "Welt: Rezept verein-nonprofit-wirkung, erfundener Verein Ryckmoor e.V. aus Greifswald, der Niedermoore im Rycktal wieder vernässt. Petrol als Markenton (Wasser, Moor), Gelb nur auf den Spendenknöpfen. Alle Zahlen sind erfunden und auf der Seite als Beispieldaten gekennzeichnet; sie sind in sich stimmig (Zuwachs je Jahr, 712 von 1 240 ha, 288 ha bis zum Ziel, 100 € Summe). Zwei Varianten über ?v=: Säulen über die Jahre und Mittelverwendung als Waffel. Die Fläche hat in beiden Varianten dieselbe Farbe. Datenfarben mit dem Palettentest der dataviz-Anleitung geprüft. Referenzen: pudding.cool, theplusaddons.com. AD-Review 02.11.2026: Note 4. Nachgebessert: Die nur für Screenreader sichtbaren Datentabellen ragten auf dem Telefon über den Rand (Layout-Viewport 512 statt 390 px); der Tabellenblock schneidet jetzt ab (position: relative, overflow: clip). Pult startet eingeklappt, weil die Schritte beim Scrollen darunter durchlaufen. Zugang 02.11.2026: Zellen der nur für Screenreader sichtbaren Tabellen zusätzlich mit clip-path ausgeblendet (Tabellen werden trotz 1 px so breit wie ihr Inhalt, 320 px sauber); Knopf-Rahmen im Kontrastmodus. Offen: inaktive Schritte mit opacity .32 (1,9:1) sind das Kernstück des Effekts, bewusst nicht aufgehellt; bei reduzierter Bewegung voll sichtbar.",
  "varianten": [
   {
    "id": "wirkung",
    "name": "Wirkung über die Jahre",
    "wann": "Vereine, Stiftungen, Initiativen und Kulturhäuser, die eine Entwicklung über Jahre mit Ausgangslage und Ziel zeigen wollen.",
    "werte": {
     "form": "Säulendiagramm, kumulierte Werte, eine Reihe, keine Legende",
     "stufen": "1 Referenzlinie Gesamtfläche, 2 Balken 2018 bis 2020, 3 Balken 2021 bis 2023 mit Notiz, 4 Balken 2024 und 2025 mit Hauptwert, 5 geplante Balken und Ziellinie",
     "dauer_ms": "900 Balken, 600 Beschriftung, Versatz 70"
    }
   },
   {
    "id": "mittel",
    "name": "Mittelverwendung",
    "wann": "Transparenzseite eines Vereins oder einer Stiftung: wohin ein Spendenbetrag fließt, in Bereichen, die zusammen 100 ergeben.",
    "werte": {
     "form": "Waffel 10 × 10, ein Feld = 1 €, plus Legende mit Beträgen",
     "stufen": "1 leer, 2 Flächen 61, 3 Messung 12, 4 Bildung 11, 5 Verwaltung 9 und Werbung 7",
     "dauer_ms": "420 je Feld, Versatz 9 je Feld, Legende 600"
    }
   }
  ]
 }
}