OnePager/Interactive Storytelling

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Unter dem Begriff Interactive Storytelling werden multimediale Präsentationen aus Fotos, Videos, Animationen und Datenvisualisierungen 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 Sie dem Benutzer zusammenhängende, interaktive Geschichten mit aussagekräftigen Bildern, Diagrammen und Visualisierungen präsentieren. Deren Inhalte werden aber erst nach und nach sichtbar, damit die Geschichte übersichtlich bleibt und die Spannung erhöht wird.

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:

Empfehlung: Auf die Frage, ob er dies öfter einsetzen würde, antwortete Gunnar, dass dies eine einmalige Sache war und der Arbeitsaufwand nicht im Verhältnis zum Produkt stünde. --Matthias Scharwies (Diskussion) 06:22, 11. Dez. 2022 (CET)

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 können Sie auch Endlosschleifen erzeugen, indem einfach die letzte Seite der Präsentation wieder die erste aufruft.

Aufbau

Schreinerei Meier

CSS: horizontales Scrollen

Das HTML-Markup ist nun schon bekannt: mehrere section-Elemente, die per CSS nun aber horizontal angeordnet werden:

horizontales Scrollen ansehen …
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;
}

Weblinks

Abgerufen am 19.06.2025
von "http://wiki.selfhtml.org/wiki/OnePager/Interactive_Storytelling"