OnePager/Interactive Storytelling
Unter dem Begriff Interactive Storytelling werden multimediale Präsentationen aus Fotos, Videos, Animationen und en z.B. mit SVG verstanden. Auch wenn es die einzelnen Bestandteile schon länger gab, ist es mit HTML5 möglich diese Medien direkt und ohne Plugins in Webseiten einzubinden.
Hierdurch können zusammenhängende, interaktive Geschichten mit aussagekräftigen Bildern, Diagrammen und Visualisierungen präsentiert werden. Deren Inhalte werden aber erst nach und nach sichtbar, damit die Geschichte übersichtlich bleibt und die Spannung erhöht wird.[1] [2]
Inhaltsverzeichnis
Vorüberlegungen
HTML als Powerpoint-Ersatz?
Könnte man eine Päsentation nicht nur mit HTML und ein bisschen JavaScript gestalten?
Im Prinzip schon - entweder man bastelt etwas völlig eigenes oder verwendet ein kleines Framework:
- deck.js
- impress.js
- Aren’t you just bored with all those slides-based presentations? Demo
- bittersmann.de/talks/sachen-gibts-die-gibts-gar-nicht
Präsentation mit impress.js (Gunnar Bittersmann)
automatische Präsentation oder Guided Tour?
Vorneweg: im Web wird vom Benutzer alles, was er nicht selber unter Kontrolle hat, als negativ empfunden. Deshalb sollten solche Präsentationen nie automatisch ablaufen, sondern als Guided Tour am Ende eines Abschnitts einen Verweis zur nächsten Seite der Tour sowie einen Verweis zur Startseite anbieten.
Interessant sind automatisch ablaufende Präsentationen dagegen etwa auf Messen in einem Kiosk-System. Dabei kann man auch Endlosschleifen erzeugen, indem einfach die letzte Seite der Präsentation wieder die erste aufruft.
Aufbau
Der Kerngedanke eines „elevator pitches“ basiert auf dem Szenario, eine wichtige Person in einem Aufzug zu treffen und diese dann während der Dauer einer Aufzugsfahrt von einer Idee zu überzeugen. Ist die Idee überzeugend genug vorgestellt worden, wird das Gespräch weitergeführt oder man verabredet sich zu einem weiterführenden Meeting.[3]
Ein Elevator Pitch wird oft in Projekten oder Verkaufsgesprächen verwendet, bei denen es wichtig ist, Ideen präzise zu formulieren und auf den Punkt zu bringen.
Einführung in SVG
Mit Präsentationsprogrammen erstellte Vorträge schauen im Allgemeinen immer gleich aus und oft kann man noch die Vorlage und das verwendete Programm selbst erkennen. Auch viele YouTube-Videos bestehen nur aus einem Vortrag und statischen Bildern. Eine wohltuende Ausnahme ist diese Einführung in SVG.[4]
2014 erschien eine Infografik "Using SVG" von Jenn Coyle,[5] die aber auf Animationen verzichtete.
Mittlerweile werden CSS-animations und die WAAPI von allen Browsern unterstützt, sodass es Zeit für eine neue Version geworden ist.
Als Ausgangspunkt verwenden wir unser HTML-Grundgerüst und section-Elemente, die jeweils nahezu den gesamten Anzeigebereich ausfüllen.
section {
width: 100%;
min-height: 90vh;
}
<section id="one">
<h2>Überschrift</h2>
<svg viewBox="0 0 410 260">
</svg>
</section>
Einige section-Elemente enthalten neben dem svg-Element noch eine Überschrift, bei anderen ist dies im svg enthalten.
Intro
Dieser Abschnitt besteht aus zwei CSS-Animationen:
- Der Kreis (
#intro
)- verändert seine Geometrie-Attribute
rx
undry
- erhält eine gelbe Füllung
- und einen blauen Rand
- verändert seine Geometrie-Attribute
- Parallel wird das dazugehörende SVG-Markup eingeblendet
#intro {
animation: changing 20s infinite;
}
@keyframes changing {
15% {
fill: black;
stroke: var(--blue);
stroke-width: 0;
cx: 0px;
cy: 0px;
}
20% {
fill: black;
stroke: var(--blue);
stroke-width: 0;
cx: 75px;
cy: 75px;
}
35% {
fill: black;
stroke: var(--blue);
stroke-width: 0;
cx: 75px;
cy: 75px;
}
40% {
fill: var(--yellow);
stroke: var(--blue);
stroke-width: 0;
cx: 75px;
cy: 75px;
}
}
SVG ist …
… eine Auszeichnungssprache für grafische Inhalte, die in HTML integriert und mit Hilfe von CSS gestylt und animiert werden können.
Deshalb ist es keine Schande, Text und Überschriften weiterhin mit HTML auszuzeichnen und SVGs als externe Grafiken einzubinden.
Grundformen
Vektorgrafiken bestehen aus Grundformen wie Kreisen, Ellipsen und Rechtecken, aber auch Polygonen und Pfaden. Man kann die Größen in Geometrie-Attributen und die Darstellung mit Präsentationsattributen beliebig gestalten und auch animieren.
<defs>
<marker id="markerKreis" markerWidth="8" markerHeight="8" refx="4" refy="4">
<circle cx="4" cy="4" r="2" />
</marker>
</defs>
<style>
#three polygon {
marker-start: url(#markerKreis);
marker-mid: url(#markerKreis);
animation: appear 20s infinite;
stroke-dasharray: 960, 960;
stroke-dashoffset: 960;
}
#three marker {
fill: #dfac20;
stroke: #000;
stroke-width: 1;
}
</style>
<polygon points="300,10 240,198 390,78 210,78 360,198" />
Der Stern ist ein Polygon, das neben der Füllung und der Randlinie stroke auch die Zwischenpunkte des Pfades – nämlich die Eckpunkte des Sterns – markiert. Das marker-Element kann mit CSS gestaltet und natürlich ein- und ausgeblendet werden.
Text in SVG
Neben grafischen Elementen kannst du auch text-Elemente einsetzen, gestalten und animieren.
Die viewBox
Einer der großen Vorteile von SVG ist die Skalierbarkeit. Dies kann über die Veränderung der Geometrie-Attribute, aber auch mit einem Ein- und Auszoomen aus der viewBox erreicht werden.
Diese Animation wurde mit SMIL durchgeführt.
Schreinerei Meier
https://commons.wikimedia.org/wiki/File:WOODlab_Meise_Wonder_Wood_Wall_1.jpg
CSS: horizontales Scrollen
Das HTML-Markup ist nun schon bekannt: mehrere section-Elemente, die per CSS nun aber horizontal angeordnet werden:
body {
overflow-y: hidden;
}
.slider {
scroll-snap-type: x mandatory;
display: flex;
overflow-x: scroll;
}
section {
border-right: thin solid white;
padding: 1rem;
min-width: 100vw;
height: 100vh;
scroll-snap-align: start;
text-align: center;
}
- https://codepen.io/polypane/pen/ZExZzrp
- https://codepen.io/polypane/details/QWmPLrb
- https://imjignesh.com/how-css-perspective-works/
Siehe auch
- Datenvisualisierung
- Balken- und Kreisdiagramme
- Liniendiagramme
- interaktive Landkarten
Weblinks
- ↑ webkrauts: Interactive Storytelling von Mathias Schäfer, (01.12.2013)
- ↑ t3n.de: Multimedia-Storytelling: Diese 25 beeindruckenden Artikel musst du gesehen haben (07.12.2013)
- ↑ Elevator Pitch(de.wikipedia.org)
- ↑ Youtube: SVG Tutorial (Level 1) - You, me and SVG (englisch)
- ↑ Medialoot: Infographic: How to Create an SVG
- t3n.de: Inspirationen fürs Webdesign: Storytelling statt Google-Optimierung vom 03.08.2017
- smashingmagazine: Better User Experience With Storytelling (29.01.2010)
- smashingmagazine: How To Use Storytelling In UX Marli Mesibov, Apr 15, 2022