Scrollytelling

Scrollytelling ist eine Erzählform, bei der das Scrollen den Ablauf einer Geschichte steuert. Eine Darstellung bleibt stehen, während der Text daran vorbeiläuft, und verändert sich an festgelegten Punkten.

Scrollytelling

Erzählform, bei der das Scrollen den Ablauf einer Geschichte steuert.
Beispiel: „Im Scrollytelling baut sich die Karte Schritt für Schritt auf, während der Text weiterläuft.“

Auch: Scroll-Storytelling. Der Begriff entstand um 2012 im Datenjournalismus.

Abgrenzung zum Parallax-Effekt: Der Parallax-Effekt bewegt Ebenen unterschiedlich schnell und erzählt nichts. Beim Scrollytelling trägt das Scrollen den Fortgang des Inhalts.

Wie es aufgebaut wird

Der feste Teil wird mit position: sticky im Sichtfeld gehalten, während der Textabschnitt daneben weiterläuft. Beim Erreichen bestimmter Textstellen wechselt die Darstellung. Erkannt wird das über einen Beobachter, der meldet, welcher Abschnitt gerade im Blick ist.

.szene__bild {
  position: sticky;
  top: 10vh;
  height: 80vh;
}

/* der Text daneben laeuft normal weiter und loest die Wechsel aus */
.szene__text { min-height: 100vh; }

Welche Voraussetzungen position: sticky hat, steht in der MDN-Beschreibung zu position. Der häufigste Fehler ist ein Elternelement mit overflow, das die Haftung stillschweigend aufhebt.

Wann es trägt

Wenn die Geschichte eine Reihenfolge hat, die sich räumlich oder zeitlich entwickelt: ein Weg auf einer Karte, der Aufbau einer Zahl, ein Vorher und Nachher. Dann macht das Scrollen den Fortschritt begreifbar, statt ihn nur zu begleiten.

Für Verkaufsseiten und für Nachschlagewerke passt es nicht. Wer etwas sucht, will springen und überfliegen, und genau das verhindert eine Form, die jeden Schritt in fester Folge erzwingt.

Was es an Aufwand bedeutet

Deutlich mehr als eine gewöhnliche Seite. Jede Szene braucht Inhalt, Darstellung und einen Auslöser, und alle drei müssen auf jeder Fensterhöhe zusammenpassen. Dazu kommt eine Fassung ohne Bewegung für alle, die reduzierte Bewegung eingestellt haben.

Aus unserer Arbeit an über 2.500 Website-Projekten lohnt sich die Form für einzelne, ausgewählte Inhalte, nicht als Format für eine ganze Website. Als Faustregel gilt: Wenn sich die Geschichte auch als Abfolge von Abschnitten erzählen lässt, gehört sie dorthin.

Dazu kommt die Pflege. Eine Szenenfolge lässt sich nicht im Redaktionsbereich umstellen, ohne die Auslöser mitzudenken, und ein nachträglich eingeschobener Absatz verschiebt alle Wechsel dahinter. Wer die Form wählt, legt den Inhalt damit für längere Zeit fest.