Gorres Scrollytelling

Beschreibung

Gorres Scrollytelling macht aus einer Webseite eine Geschichte, die durch Scrollen vorangetrieben wird: Scrollytelling.

Scrollytelling (aus „Scrolling“ und „Storytelling“) ist eine Art, Geschichten im Web zu erzählen, bei der das Scrollen selbst die Geschichte vorantreibt. Statt die Seite bloß nach unten zu bewegen, löst jeder Scrollschritt eine Veränderung aus: Grafiken bauen sich auf, Karten zoomen, Bilder wechseln, Diagramme animieren sich passend zum Text.

Mit Gorres Scrollytelling füllt ein Medium den Bildschirm und bleibt an Ort und Stelle, während der Text des aktuellen Schritts darüber scrollt. Sobald der nächste Schritt die Bildschirmmitte erreicht, wechselt das Medium dahinter.

Eine Story wird aus vier Arten von Blöcken zusammengesetzt und kann so viele davon enthalten, wie sie braucht:

• Scrollytelling-Story – der Rahmen. Sie enthält das Layout der Textkästen, die Abdunkelung der Medien und die Länge eines Schritts.
• Scrollytelling-Schritt – ein Schritt der Story. Er trägt sein eigenes Bild oder Video und dazu beliebige Blöcke deiner Wahl als Text. Eine Story nimmt beliebig viele Schritte auf. Ein Schritt ohne Medium behält das Medium des vorherigen Schritts, sodass mehrere Textkästen nacheinander über dasselbe Bild oder Video scrollen können.
• Scrollytelling-Reihe – optionale Gruppe von Schritten innerhalb einer Story, die seitwärts vorbeiziehen: Der Bildschirm bleibt stehen, und die Schritte bewegen sich durch ihn hindurch, während der Besucher weiter nach unten scrollt. Schritte vor und nach der Reihe scrollen wie gewohnt vertikal.
• Scrollytelling-Nachspann – optionaler Inhalt, der auf den letzten Schritt folgt. Unter einer auf das Medium begrenzten Bühne erscheint er ab dem ersten Schritt direkt unter der Bühne, statt diesen Raum leer zu lassen.

Was du einstellen kannst

• Position der Textkästen: links, mittig oder rechts, horizontal und vertikal, für die ganze Story oder je Schritt
• Ein Textkasten, der für die Dauer seines Schritts auf dem Bildschirm stehen bleibt, für einen Hinweis oder eine Überschrift über einem Medium
• Breite der Textkästen in Prozent der verfügbaren Spalte
• Aussehen eines Textkastens je Schritt: Hintergrund, Rand, abgerundete Ecken, Schatten und Innenabstand
• Typografie je Schritt: Schriftfamilie, Schriftgröße, Schriftstärke und Schriftstil, Zeilenhöhe, Zeichenabstand, Schreibweise, Dekoration und Textausrichtung
• Wie die Textkästen erscheinen und verschwinden: Einblenden, Hochgleiten, Heranzoomen, Hereindrehen oder Punktraster, für die ganze Story oder je Schritt
• Richtung: Schritte scrollen den Bildschirm hinauf, Schritte in einer Reihe ziehen seitwärts vorbei, und eine Story kann beides mischen
• Wie ein Medium den Bildschirm füllt: Ausschnitt füllen oder ganzes Medium zeigen
• Bei einer auf das Medium begrenzten Bühne: den Inhalt nach der Story bis unter die Bühne hochziehen, sodass er ab dem ersten Schritt zu sehen ist
• Abdunkelung der Medien, damit der Text lesbar bleibt
• Abstand von oben, für Websites mit fixiertem Menü
• Höhe eines Schritts, die bestimmt, wie lange sein Medium stehen bleibt, für die ganze Story oder je Schritt
• Mehrere Textkästen vor einem Medium: Schritte ohne eigenes Medium, über ihre eigene Höhe so dicht beieinander, wie du möchtest
• Überblenden oder sofortiger Wechsel zwischen den Medien
• Fokuspunkt je Medium, damit der richtige Teil beim Zuschnitt erhalten bleibt
• Ein Bild, das mit seinem Schritt wegscrollt, statt stehen zu bleiben, für einen Eröffnungsbildschirm, der sich wie ein Vorhang hebt
• Ein zweites Bild je Schritt für Hochformat-Bildschirme, damit ein Querformat-Bild auf einem hochkant gehaltenen Smartphone nicht seitlich abgeschnitten wird

Sorgfältig umgesetzt

• Keine JavaScript-Bibliothek. Das Frontend-Script ist etwa sieben Kilobyte groß, komprimiert etwas über zwei, und nutzt den IntersectionObserver des Browsers.
• Lesbar ohne JavaScript. Das erste Medium bleibt sichtbar, und der Text folgt darunter, sodass die Seite immer benutzbar bleibt. Die Schritte einer Reihe folgen dann einfach aufeinander.
• Berücksichtigt reduzierte Bewegung. Kein Überblenden, kein Texteffekt, keine Seitwärtsbewegung und kein laufendes Video, wenn der Besucher weniger Bewegung wünscht.
• Funktioniert mit der Tastatur. Erhält ein Link oder ein Feld in einem Schritt einer Reihe den Fokus, wird der Schritt ins Bild gebracht, falls er noch nicht auf dem Bildschirm ist; ebenso ein Schritt, auf den ein Link zeigt.
• Screenreader bekommen immer nur ein Medium. Alle Medien einer Story stehen zugleich im Dokument; nur das sichtbare wird ihnen zugänglich gemacht.
• Scharfe Bilder. Das Plugin berechnet das sizes-Attribut aus dem Seitenverhältnis des Bildes, denn ein bildschirmhohes Medium braucht eine breitere Datei als der Bildschirm selbst.

Die Onlinehilfe zeigt jeden Block und jede Einstellung live, siehe Abschnitt „Dokumentation“.

Dokumentation

• Onlinehilfe: eine Hilfe-Website, die in WordPress Playground läuft, auf Englisch und Deutsch. Jede Seite zeigt die Blöcke live, mit den Einstellungen, die sie beschreibt.
• Quellcode: das Plugin auf GitHub.

Quellcode

Die Dateien in build/ sind kompiliert und minifiziert. Deren lesbare Quellen liegen dem Plugin im Ordner src/ bei, ein Unterordner je Block: src/story/, src/step/, src/row/ und src/after/. Der vollständige Quellcode einschließlich der Entwicklungswerkzeuge ist öffentlich unter github.com/jgorres/gorres-scrollytelling-plugin.

Das Build-Werkzeug ist @wordpress/scripts (webpack); package.json liegt dem Plugin bei. Um build/ aus src/ neu zu erzeugen, führe bei installiertem Node.js und npm diese Befehle im Plugin-Ordner aus:

1. npm install
2. npm run build

Das Plugin verwendet keine Bibliotheken von Drittanbietern.