reveal.js · Technik-Überblick

Was mit reveal.js geht

Ein Showcase und eine Nachschlaghilfe.

Florian Loyns

reveal.js ist ein freies Open-Source-Framework (MIT) von Hakim El Hattab und der Community.

Überblick

Sieben Kerntechniken – jede auf einer Folie.

Vertikale Folien – Themen nach unten vertiefen
Fragments – Schritt für Schritt einblenden
Übergänge – Folienwechsel animieren
Hintergründe – Farbe, Verlauf, Bild, Video
Medien – Video, Audio und Webseiten einbetten
Auto-Animate – Elemente weich bewegen
Modi & Tasten – Übersicht, Sprecheransicht, PDF

Alles im Folgenden sind eingebaute reveal.js-Funktionen – ganz ohne Plugin.

Struktur · horizontal

Folien laufen von links nach rechts – und können nach unten verzweigen.

Die Hauptlinie ist waagerecht. Wo ein Thema Tiefe hat, hängst du vertikale Unterfolien darunter – ideal, um Details optional bereitzuhalten.

So schreibst du's

<section>
  <section>Oberfolie</section>
  <section>Unterfolie</section>
</section>

↓ Drücke die Pfeiltaste nach unten – diese Folie hat eine Unterfolie.

Struktur · vertikal

Das hier ist die Unterfolie.

Du bist gerade nach unten gesprungen. Mit der Pfeiltaste nach oben geht es zurück, nach rechts weiter zum nächsten Hauptthema.

Aufbau · Fragments

Inhalte Schritt für Schritt einblenden.

fragment – erscheint (Standard)
fade-up – steigt herein
highlight-current-blue – hebt in Blau hervor
strike – streicht durch
erst da, dann gedimmt

So schreibst du's<li class="fragment fade-up">…</li>

Probier's: Leertaste oder → blendet die Punkte nacheinander ein.

Übergänge

Diese Folie ist gerade hereingezoomt.

Jeder Folienwechsel kann eine eigene Animation haben. Verfügbar sind: none, fade, slide, convex, concave, zoom.

So schreibst du's<section data-transition="zoom">…</section>

Sparsam einsetzen – ein ruhiges fade wirkt in der Lehre meist am besten.

Hintergrund · Farbe

Eine Vollflächen-Farbe hinter der Folie.

data-background-color

Hintergrund · Farbverlauf

Ein Verlauf statt Vollton.

data-background-gradient

Hintergrund · Bild

Ein Bild formatfüllend hinter der Folie.

data-background-image

Hintergrund · Video

Ein Film läuft hinter der Folie.

data-background-video

Medien · Video

Ein Video läuft direkt in der Folie.

So schreibst du's

<video data-autoplay muted loop>
  <source data-src="film.mp4" type="video/mp4">
</video>

reveal pausiert das Video automatisch beim Folienwechsel – und lädt es dank data-src erst bei Bedarf.

Medien · Audio

Auch Ton spielt direkt in der Folie.

So schreibst du's

<audio controls>
  <source data-src="ton.mp3" type="audio/mpeg">
</audio>

Wie beim Video: reveal pausiert den Ton beim Folienwechsel und lädt ihn per data-src erst bei Bedarf. data-autoplay würde ihn automatisch starten.

Medien · iframe

Eine ganze Webseite lebt in der Folie.

Aus Datenschutzgründen lädt die Karte erst auf Klick. Dabei wird eine Verbindung zu openstreetmap.org hergestellt und deine IP-Adresse an OpenStreetMap übertragen.

So schreibst du's<iframe data-src="https://www.openstreetmap.org/export/embed.html?…"></iframe>

Datenschutzfreundlich: erst auf Klick geladen (Klick = Einwilligung). Läuft nur online.

Auto-Animate

Gleiche Elemente wandern weich von Folie zu Folie.

ein Kasten

↓ Weiter nach unten – beobachte den Kasten.

Auto-Animate

reveal.js interpoliert Größe, Position und Farbe von selbst.

derselbe Kasten – nur größer

So schreibst du's

<section data-auto-animate> … data-id="box" … </section>
<section data-auto-animate> … data-id="box" … </section>

Nachschlag · Modi & Tasten

Was reveal.js beim Vortragen kann.

Taste	Funktion	Wofür
`Esc` / `O`	Übersichtsmodus	Alle Folien als Raster – schnell springen
`S`	Sprecheransicht	Notizen, Timer und nächste Folie im zweiten Fenster
`F`	Vollbild	Ablenkungsfreie Präsentation
`Alt`+Klick	Zoom	In ein Detail hineinvergrößern
`G`	Jump-to-Slide	Direkt zu einer Foliennummer springen
`B` / `.`	Pause (Schwarzbild)	Aufmerksamkeit zurück in den Raum holen
Druck → PDF	PDF-Export	Handout aus denselben Folien

Alles eingebaute reveal.js-Funktionen – ohne jedes Plugin verfügbar.

Credits & Lizenz

Das Fundament ist nicht mein Werk.

reveal.js ist ein freies Open-Source-Framework (MIT) von Hakim El Hattab und der Community.

revealjs.com