Title: Gorres Scrollytelling Author: jgorres Published: 4. Oktober 2026 Last modified: 4. Oktober 2026 --- Plugins suchen ![](https://ps.w.org/gorres-scrollytelling/assets/banner-772x250.png?rev=3727052) ![](https://ps.w.org/gorres-scrollytelling/assets/icon-256x256.png?rev=3727052) # Gorres Scrollytelling Von [jgorres](https://profiles.wordpress.org/jgorres/) [Herunterladen](https://downloads.wordpress.org/plugin/gorres-scrollytelling.2.12.3.zip) * [Details](https://de.wordpress.org/plugins/gorres-scrollytelling/#description) * [Rezensionen](https://de.wordpress.org/plugins/gorres-scrollytelling/#reviews) * [Installation](https://de.wordpress.org/plugins/gorres-scrollytelling/#installation) * [Entwicklung](https://de.wordpress.org/plugins/gorres-scrollytelling/#developers) [Support](https://wordpress.org/support/plugin/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](https://joern.gorres.com/gorres-scrollytelling-help/): 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](https://github.com/jgorres/gorres-scrollytelling-plugin): 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](https://github.com/jgorres/gorres-scrollytelling-plugin). Das Build-Werkzeug ist [@wordpress/scripts](https://www.npmjs.com/package/@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. ## Screenshots [⌊Eine Story im Frontend: Die Medien bleiben stehen und wechseln, während die Textkästen darüber scrollen (animiert).⌉⌊Eine Story im Frontend: Die Medien bleiben stehen und wechseln, während die Textkästen darüber scrollen (animiert).⌉[ Eine Story im Frontend: Die Medien bleiben stehen und wechseln, während die Textkästen darüber scrollen (animiert). [⌊Eine auf das Medium begrenzte Bühne; der Inhalt nach der Story ist bis unter sie hochgezogen.⌉⌊Eine auf das Medium begrenzte Bühne; der Inhalt nach der Story ist bis unter sie hochgezogen.⌉[ Eine auf das Medium begrenzte Bühne; der Inhalt nach der Story ist bis unter sie hochgezogen. [⌊Der Story-Block im Editor mit seinen Einstellungen.⌉⌊Der Story-Block im Editor mit seinen Einstellungen.⌉[ Der Story-Block im Editor mit seinen Einstellungen. [⌊Ein einzelner Schritt im Editor mit seinem Medium und seinem Text.⌉⌊Ein einzelner Schritt im Editor mit seinem Medium und seinem Text.⌉[ Ein einzelner Schritt im Editor mit seinem Medium und seinem Text. ## Blöcke Dieses Plugin bietet 4 Blöcke. * Scrollytelling Story A full-screen medium that stays in place while the text steps scroll across it. * Scrollytelling Afterword Content that follows the last step. With a stage limited to the medium it sits right below the stage from the first step on. * Scrollytelling Row A row of steps inside a story. Its steps pass sideways while the visitor keeps scrolling down. * Scrollytelling Step One step of the story: text that scrolls across the medium belonging to it. ## Installation 1. Installiere das Plugin über Plugins Neues Plugin hinzufügen oder lade den Ordner nach `/wp-content/plugins/` hoch. 2. Aktiviere es. 3. Füge den Block „Scrollytelling-Story“ einer Seite hinzu und wähle für jeden Schritt ein Medium. 4. Soll eine Story bis an die Bildschirmränder reichen, stelle den Story-Block auf volle Breite. ## FAQ ### Welche Bildgrößen sollte ich verwenden? Bei „Ausschnitt füllen“ spielt das Seitenverhältnis keine Rolle, wohl aber die Auflösung: Ein bildschirmhohes Medium braucht in der Breite etwa Bildschirmhöhe mal Seitenverhältnis, also rund 2.560 Pixel für ein 16:9-Bild. Bei „Ganzes Medium zeigen“ lohnt es sich, allen Medien einer Story dasselbe Seitenverhältnis zu geben, sonst ändern sich die freien Ränder von Schritt zu Schritt. ### Mein Bild wird auf dem Smartphone seitlich abgeschnitten. Was kann ich tun? Ein Querformat-Bild, das einen hochkant gehaltenen Bildschirm füllt, zeigt nur seinen mittleren Teil. Setze den Fokuspunkt des Schritts, um den wichtigen Teil im Blick zu behalten, oder gib dem Schritt ein zweites Bild für Hochformat-Bildschirme: Öffne in den Einstellungen des Schritts „Hochformat-Bildschirme“ und wähle ein Bild im Hochformat. Es ersetzt das Bild des Schritts, sobald der Bildschirm höher als breit ist, hat einen eigenen Fokuspunkt und übernimmt den Alternativtext. Nur Bilder lassen sich so ersetzen, keine Videos. ### Kann ich Videos verwenden? Ja, Bilder und Videos aus der Mediathek. Ein Video läuft stumm und nur, solange sein eigener Schritt sichtbar ist, und es bleibt pausiert, wenn der Besucher reduzierte Bewegung wünscht. ### Was geschieht mit einem Schritt ohne Medium? Sein Text scrollt über das Medium des vorherigen Schritts. Das eignet sich für eine Schlussbemerkung auf dem letzten Bild. ### Können mehrere Textkästen über dasselbe Medium scrollen? Ja. Gib dem ersten Schritt das Medium und füge weitere Schritte ohne Medium hinzu: Deren Textkästen scrollen nacheinander über das Medium des ersten Schritts. Um die Kästen dichter zusammenzurücken, öffne in den Einstellungen eines solchen Schritts„ Höhe“, schalte „Schritthöhe der Story verwenden“ aus und wähle eine niedrigere Höhe. Jeder dieser Schritte behält sein eigenes Aussehen und seinen eigenen Texteffekt. Innerhalb einer Reihe hat die Höhe eines einzelnen Schritts keine Wirkung. ### Kann eine Story mit einem Titelbild beginnen, das wegscrollt? Ja. Gib dem ersten Schritt das Titelbild und schalte unter „Medium“ die Option „ Bild mitscrollen lassen“ ein. Das Bild füllt beim Laden der Seite den Bildschirm und scrollt mit dem Schritt weg, während dahinter schon das Medium des nächsten Schritts zu sehen ist. Ein Bild, das bei voller Breite höher ist als der Bildschirm, behält seine Höhe, und der Schritt wird so hoch wie das Bild; erhält der Schritt unter „Höhe“ eine eigene Höhe, füllt das Bild genau diese. Zusammen mit einem stehen gelassenen Textkasten bleibt ein Hinweis oder eine Überschrift auf dem Bildschirm, während das Titelbild hinausgeht. Nur Bilder können mitscrollen, keine Videos, und innerhalb einer Reihe hat die Einstellung keine Wirkung. ### Kann ein Textkasten stehen bleiben, statt vorbeizuscrollen? Ja. Öffne in den Einstellungen des Schritts „Position“ und schalte „Textkasten stehen lassen“ ein. Der Textkasten bleibt dann an seiner Stelle auf dem Bildschirm stehen, während der Besucher durch den Schritt scrollt, und verlässt den Bildschirm nach oben, wenn der Schritt endet. Wie lange er stehen bleibt, hängt von der Höhe des Schritts ab: Gib dem Schritt unter „Höhe“ eine Höhe über 100 Prozent; 150 Prozent halten den Kasten für eine halbe Bildschirmhöhe Scrollweg. An derselben Stelle kann ein Schritt seinen Textkasten anders platzieren als der Rest der Story. Ein stehen gelassener Textkasten hat keinen Texteffekt, und innerhalb einer Reihe hat die Einstellung keine Wirkung. ### Warum ist unter der Bühne leerer Raum? Mit „Bühne auf das Medium begrenzen“ ist die Bühne niedriger als der Bildschirm, und der Inhalt nach der Story folgt erst auf den letzten Schritt. Schalte im Story- Block „Folgenden Inhalt hochziehen“ ein: Der Inhalt danach steht dann direkt unter der Bühne, während die Schritte ablaufen, und scrollt weiter, sobald die Story endet. Gehört der Inhalt zur Story selbst, setze ihn stattdessen in einen Block „Scrollytelling- Nachspann“ innerhalb der Story. ### Wie verhält sich eine Reihe in verschiedenen Browsern? Browser mit Scroll-Timelines (Chrome, Edge, Safari ab Version 26) bewegen die Reihe mit der Scrollposition. Alle anderen, derzeit Firefox, gleiten von einem Schritt zum nächsten. Ist der Text eines Schritts zu hoch für den Bildschirm oder wünscht der Besucher reduzierte Bewegung, folgen die Schritte der Reihe wie gewöhnliche Schritte vertikal aufeinander. Texteffekte wirken innerhalb einer Reihe nicht. ### Bleibt der Text auf einem hellen Bild lesbar? Die Story dunkelt ihre Medien ab; wie stark, legst du fest. Zusätzlich kann jeder Schritt seinem Textkasten über die üblichen Block-Einstellungen einen Hintergrund, einen Rand und einen Schatten geben und eine eigene Textfarbe festlegen. ## Rezensionen Zu diesem Plugin liegen noch keine Rezensionen vor. ## Mitwirkende und Entwickler „Gorres Scrollytelling“ ist Open-Source-Software. Folgende Menschen haben an diesem Plugin mitgewirkt: Mitwirkende * [ jgorres ](https://profiles.wordpress.org/jgorres/) „Gorres Scrollytelling“ wurde in 1 Sprache übersetzt. Danke an [die Übersetzer](https://translate.wordpress.org/projects/wp-plugins/gorres-scrollytelling/contributors) für ihre Mitwirkung. [Übersetze „Gorres Scrollytelling“ in deine Sprache.](https://translate.wordpress.org/projects/wp-plugins/gorres-scrollytelling) ### Interessiert an der Entwicklung? [Durchstöbere den Code](https://plugins.trac.wordpress.org/browser/gorres-scrollytelling/), sieh dir das [SVN-Repository](https://plugins.svn.wordpress.org/gorres-scrollytelling/) an oder abonniere das [Entwicklungsprotokoll](https://plugins.trac.wordpress.org/log/gorres-scrollytelling/) per [RSS](https://plugins.trac.wordpress.org/log/gorres-scrollytelling/?limit=100&mode=stop_on_copy&format=rss). ## Änderungsprotokoll #### 2.12.3 * Hinzugefügt: `package.json` liegt dem Plugin bei, sodass sich `build/` mit `npm install` und `npm run build` aus `src/` neu erzeugen lässt. Die Readme nennt das öffentliche Quellcode-Repository. #### 2.12.2 * Hinzugefügt: Links zur Onlinehilfe in WordPress Playground, in der Readme und in der Zeile des Plugins in der Plugin-Liste. #### 2.12.1 * Hinzugefügt: Der Plugin-Header verlinkt auf das Quellcode-Repository auf GitHub. #### 2.12.0 * Geändert: Das Plugin heißt jetzt Gorres Scrollytelling. Die Blöcke heißen Scrollytelling- Story, Scrollytelling-Schritt, Scrollytelling-Reihe und Scrollytelling-Nachspann. * Geändert: Die Blöcke verwenden den Namensraum `gorres-scrollytelling`, und die Text-Domain lautet `gorres-scrollytelling`. #### 2.11.0 * Neu: Das Bild eines Schritts kann mit dem Schritt mitscrollen, statt auf der Bühne stehen zu bleiben. * Geändert: Eine Story, die mit Schritten ohne Medium beginnt, zeigt auf der Bühne von Anfang an das erste folgende Medium statt einer leeren Bühne. * Geändert: Der Plugin-Header nennt keine Plugin-URI mehr. #### 2.10.0 * Neu: Ein Schritt kann seinen Textkasten anders platzieren als der Rest der Story, horizontal und vertikal. * Neu: Ein Schritt kann seinen Textkasten auf dem Bildschirm stehen lassen, während der Besucher durch ihn scrollt. #### 2.9.0 * Neu: Ein Schritt kann ein zweites Bild für Hochformat-Bildschirme tragen. Es ersetzt das Bild des Schritts, sobald der Bildschirm höher als breit ist, damit ein Querformat-Bild auf einem hochkant gehaltenen Smartphone nicht seitlich abgeschnitten wird. * Neu: Das Paket enthält die Quellen der kompilierten Block-Dateien in `src/`; die Readme beschreibt, wie sie gebaut werden. #### 2.8.4 * Behoben: Das Video des ersten Schritts startete, sobald die Seite geladen war, auch wenn die Story weiter unten auf der Seite lag, und ein Video lief weiter, nachdem die Story den Bildschirm verlassen hatte. Ein Video läuft jetzt nur, solange seine Story auf dem Bildschirm ist. #### 2.8.3 * Plugin-Header: „Tested up to“ wird nur noch in der Readme deklariert, wie es das Plugin-Verzeichnis verlangt. Keine Verhaltensänderung. #### 2.8.2 * Readme: Die Beschreibung erwähnt jetzt mehrere Textkästen vor einem Medium. Keine Verhaltensänderung. #### 2.8.1 * Behoben: Im Editor klassischer Themes schrumpften Schritte und Reihen in einer Story mit voller Breite auf die Breite ihres Inhalts. Sie füllen die Story wieder aus. #### 2.8.0 * Neu: Ein Schritt kann eine eigene Höhe statt der Schritthöhe der Story haben. Niedrigere Schritte ohne Medium lassen mehrere Textkästen nacheinander über dasselbe Medium scrollen. #### 2.7.2 * Neu: Spendenlink in der Zeile des Plugins in der Plugin-Liste. #### 2.7.1 * Readme: Beschreibung überarbeitet, Spendenlink ergänzt. Keine Verhaltensänderung. #### 2.7.0 * Neu: Block „Scrollytelling-Reihe“. Setze Schritte in eine Reihe innerhalb einer Story, und sie ziehen seitwärts vorbei, während der Besucher weiter nach unten scrollt; Schritte vor und nach der Reihe scrollen wie bisher vertikal. * Browser mit Scroll-Timelines bewegen die Reihe mit der Scrollposition; alle anderen gleiten von Schritt zu Schritt. Eine Reihe, deren Text nicht auf den Bildschirm passt, und jede Reihe für Besucher, die reduzierte Bewegung bevorzugen, läuft vertikal ab. * Tastaturfokus und Links auf einen Anker bringen einen Schritt einer Reihe ins Bild. #### 2.6.2 * Neu: zwei weitere Texteffekte. „Hereindrehen“ dreht den Textkasten wie einen Propeller an seinen Platz, „Punktraster“ baut ihn aus einem Raster wachsender Punkte auf und wieder ab. #### 2.6.1 * Behoben: Der Zoom-Effekt war kaum sichtbar. Der Textkasten startet jetzt kleiner und ist nach der Hälfte des Weges voll deckend, sodass die Größenänderung zu sehen ist. * Geändert: Der Einblend-Effekt läuft länger, sodass er noch sichtbar ist, während der Textkasten ins Bild scrollt. #### 2.6.0 * Neu: Texteffekte. Die Textkästen können eingeblendet werden, hochgleiten oder heranzoomen, wenn sie den Bildschirm betreten, und ihn auf dieselbe Weise verlassen. Lege den Effekt für die ganze Story oder je Schritt fest. * Browser mit Scroll-Timelines koppeln den Effekt an die Scrollposition; alle anderen führen ihn einmal als Übergang aus. Besucher, die reduzierte Bewegung bevorzugen, sehen keinen Effekt. #### 2.5.0 * Neu: Typografie-Einstellungen für einen Schritt: Schriftfamilie, Schriftstärke und Schriftstil, Zeichenabstand, Schreibweise, Dekoration und Textausrichtung. * Neu: Schatten für den Textkasten eines Schritts. * Geändert: Hintergrund, Rand und Innenabstand eines Schritts gelten jetzt für seinen Textkasten statt für den ganzen Schritt. Ein Kasten mit Hintergrund erhält einen Standard-Innenabstand und, sofern keine Textfarbe gesetzt ist, die Textfarbe des Themes. #### 2.4.1 * Intern: Frontend-Script und Styles des Story-Blocks sind in Module aufgeteilt. Keine Verhaltensänderung. * Geändert: Die Klasse, die das Überblenden einschaltet, heißt jetzt `is-effect- fade` (bisher `has-fade`); die ungenutzte Klasse `no-fade` ist entfallen. #### 2.4.0 * Erste öffentliche Version. ## Meta * Version **2.12.3** * Zuletzt aktualisiert **vor 2 Wochen** * Aktive Installationen **weniger als 10** * WordPress-Version ** 6.7 oder höher ** * Getestet bis **7.1.3** * PHP-Version ** 8.1 oder höher ** * Sprachen * [English (US)](https://wordpress.org/plugins/gorres-scrollytelling/) und [German](https://de.wordpress.org/plugins/gorres-scrollytelling/). * [Übersetze in deine Sprache](https://translate.wordpress.org/projects/wp-plugins/gorres-scrollytelling) * Schlagwörter * [blocks](https://de.wordpress.org/plugins/tags/blocks/)[scroll](https://de.wordpress.org/plugins/tags/scroll/) [scrollytelling](https://de.wordpress.org/plugins/tags/scrollytelling/)[sticky](https://de.wordpress.org/plugins/tags/sticky/) [storytelling](https://de.wordpress.org/plugins/tags/storytelling/) * [Erweiterte Ansicht](https://de.wordpress.org/plugins/gorres-scrollytelling/advanced/) ## Bewertungen Es wurden noch keine Rezensionen eingereicht. [Deine Rezension](https://wordpress.org/support/plugin/gorres-scrollytelling/reviews/#new-post) [Alle Rezensionen anzeigen](https://wordpress.org/support/plugin/gorres-scrollytelling/reviews/) ## Mitwirkende * [ jgorres ](https://profiles.wordpress.org/jgorres/) ## Support Möchtest du etwas mitteilen? Brauchst du Unterstützung? [Support-Forum anzeigen](https://wordpress.org/support/plugin/gorres-scrollytelling/) ## Spenden Möchtest du die Weiterentwicklung dieses Plugins unterstützen? [ Für dieses Plugin spenden ](https://ko-fi.com/joerngorres/)