201214Mär

Reveal.js: HTML/CSS-Präsentationstool mit 3D-Effekten

Präsentation im Web sind schon lange keine Seltenheit mehr und gewinnen immer stärker an Bedeutung. Ein Framework wie beispielsweise Deck.js hilft dabei, HTML-Präsentation zu erstellen. Wer auch Flash als Technologie einsetzen kann, dürfte mit Prezi gut bedient sein, da sich mit diesem Tool interaktive Präsentationen nach dem Baukasten-Prinzip erzeugen lassen. Inzwischen gibt es auch eine HTML/CSS3-Version von Prezi, die sich Impress.js nennt und ähnliche Effekte durch Webstandards bietet.
Hakim El Hattab hat nun mit seinem Präsentationstool Reveal.js eine weitere Lösung geschaffen, mit der sich ebenfalls Web-Präsentationen entwickeln lassen, die von 3D-Effekten Gebrauch machen.

Reveal.js

Der Entwickler setzt bei seinem Framework auf CSS3-3D-Transforms, wobei als Fallback auf gewöhnliche 2D-Transforms zurückgegriffen wird. Eine Reveal-Präsentation benötigt folgende HTML-Struktur:

  • <div id="reveal">
  • <div class="slides">
  • <section>
  • Slide-Inhalt
  • </section>
  • </div>
  • </div>

Ein section-Bereich repräsentiert also einen Slide, wobei auch mehrere Sections verschachtelt werden können. Reveal bietet zudem verschiedene Optionen und so können die Slides auch in der Browser-History gespeichert werden. Weitere Details sowie eine Dokumentation finden sich bei GitHub.