21. Januar 2022
Wie Web Stories von Scroll-Animationen profitieren können
In diesem Post geht es darum, wie Dir Pageflow Next mehr denn je helfen kann, fesselnde Geschichten zu erzählen und Dein Publikum multimedial in den Bann zu ziehen. Wir zeigen Dir, wie Du verblüffende Scroll-Animationen erstellen kannst, ohne auch nur eine einzige Zeile Code zu kennen. Alles was Du benötigst ist ein gutes Gespür für Story-Elemente, die sich in Phasen entfalten und einen Zugang zu optisch hochwertigem Bildmaterial.
Idealerweise beherrschst Du zudem selbst Grafikprogramme oder hast jemanden an Bord, der Deine Story-Vision versteht und sie für Dich visuell umsetzen kann.
Nutze diese Grundlage, um verschiedene Versionen Deiner Bilder, Grafiken oder Visualisierungen zu erstellen.
Durch ein cleveres Arrangement aufeinanderfolgender Phasenbilder im Zusammenspiel mit bestimmten Transitionen werden Deine Grafiken dann in ein einzigartiges Erscheinungsbild im Sinne eines scrollbaren Daumenkinos verwandelt.
Dieser Clip zeigt eine Scroll-Animation mit 6 Phasenbildern
Damit lässt sich die optische Strahlkraft Deiner Artikel, Longreads oder digitalen Reportagen mehr verstärken, als es mit den bestehenden Storytelling-Tools von Pageflow jemals möglich war.
Plattform-Übergreifende Lesbarkeit garantiert
Die folgenden Features sind entwickelt worden, um Deine Scroll-Stories auf Desktop, Tablet und Smartphone gleichermaßen gut zugänglich zu machen:
- Verwende separate mobile Bilder im Verhältnis 9:16, um Dein Motiv für Smartphones zu optimieren, wenn wesentliche Teile der Desktop-Version nicht ins Hochformat passen.
- Wähle einen Motivbereich, um Dein Diagramm, Produkt oder Protagonisten in Szene zu setzen, und lege fest, ab wann Text vor Deinem Motiv erscheinen darf.
- Nutze den dynamischen Schatten oder eine Karte, um die Wirkung des Kontrasts zu verstärken, sobald Dein Motiv mit Text überlagert wird.
- Nutze die mobile Vorschau des Editors, um die Darstellung Deiner Stories auch auf Smartphones zu optimieren.
Mit Scroll- Effekten die Wahrnehmung Verändern
Wir glauben daran, dass unterschwellige Veränderungen in der sensorischen Wahrnehmung von Web-Produkten das Potenzial haben, uns in einen anderen Geisteszustand zu versetzen. Ein Zustand, in dem das Bewusstsein geschärft wird und weiterer Input Emotionen auslösen kann. In Bezug auf digitales Storytelling können diese Veränderungen in der Aufnahme von Information durch Bildsprache, Ton, Interaktion und Worte hervorgerufen werden.
Und wir glauben, dass Storytelling immer darauf abzielen sollte, diese Instrumente so zu nutzen, dass die volle Aufmerksamkeit der Leserschaft entfesselt wird.
Deshalb stellt Pageflow Dir alle notwendigen Werkzeuge zur Verfügung, um Dein Publikum auf die bestmögliche Weise multimedial zu erreichen.
Machen wir's konkret
Die folgenden vier Abschnitte verwenden Variationen eines Hintergrundbildes in weiß/schwarz/gelb.
Der Übergang zwischen diesen Abschnitten heißt Scrollen mit statischem Hintergrund. Dieser Scroll-Effekt kann z.B. verwendet werden, um Objekte an einer Position zu fixieren und beim Scrollen einen zweiten Hintergrund von unten nach oben freizulegen.
Um die kommenden Abschnitte auch hörbar zu machen, aktiviere bitte den Ton:
Der Ton kann über das Lautsprecher-Symbol in der Navigationsleiste wieder deaktiviert werden.
Schwarz und gelb
Die weiße Karte, die wir hier verwendet haben, erfüllt zwei Aufgaben: Zunächst möchten wir die Gelegenheit nutzen, um eine neue Art vorzustellen, Text ganz allgemein vom Hintergrund abzuheben. Aber was noch wichtiger ist:
Durch die Verwendung einer Karte kannst Du immer einen perfekten Kontrast für die Lesbarkeit auf Smartphones garantieren. Um zu verstehen, wie der folgende Scoll-Effekt funktioniert, sieh Dir bitte diese Vorher-Nachher-Bilder an:
Beispiele
Pro Tipp #1 - Scrollbare Animationen
Wie Du mit Zwei Bildern, das Füllen eines Glases simulierst
Scrolle durch das folgende Beispiel, um zu sehen, wie aus einem leeren Glas ein volles Glas mit leckerem Rotwein wird. Um die Animation in eine passende Umgebung zu setzen, haben wir das Glas auf ein Fass gestellt.
Scrolle selbst durch das Iframe:
Schaue das komplette Beispiel hier an:
Pro Tipp #2 - Scrollbare Data Stories
Wie du mit Phasenbildern scrollbare DatA Stories erstellst
Eine besondere Herausforderung bei der Darstellung von Diagrammen und anderen Datenvisualisierungen ist die plattformübergreifende Funktionalität. Denke daran, dass Symbole und Typografie auch mobil lesbar sein müssen und dass alle Teile einer Grafik für die unterschiedlichen Bildschirm-Größen zugänglich sein sollten.
Wenn Du diesen Artikel auf einem großen Bildschirm im Querformat liest, verkleinere das Browserfenster, um die Smartphone-Version zu sehen. Falls Du hingegen mit einem Smartphone unterwegs bist, drehe Dein Gerät bitte, um in die Desktop-Ansicht zu gelangen.
Das komplette Beispiel findest Du hier:
Pro Tipp #3 - Scroll Exploration
Wie Du Phasenbilder für Bildungs-inhalte Aufbereitest
Da Pageflow immer öfter auch als Tool für Digitales Lernen eingesetzt wird, möchten wir hier zeigen, wie einfach Du ein trockenes Thema in eine verständliche Lernerfahrung für die virtuelle Unterrichtsstunde verwandeln kannst.
In diesem Beispiel haben wir eine Explorations-Zeichnung der Erde verwendet - von der umgebenden Atmosphäre bis zum inneren Kern - und einzelne Bilder der verschiedenen Schichten erstellt.
Für eine Vollversion des Beispiels klicke hier: