reveal.js: Präsentationen auf HTML5- und CSS3-Basis

Entwicklung & Design

reveal.js: Präsentationen auf HTML5- und CSS3-Basis

04.12.2012, 10:08 Uhr

reveal.js ist ein Framework, mit dem ihr auf einfache Weise beeindruckende Präsentationen auf HTML5- und CSS3-Basis erstellen könnt. Wir zeigen euch, was das Framework kann und was es von ähnlichen Alternativen unterscheidet.

reveal.js bietet beeindruckende HTML5-Präsentationen auf Basis von HTML5 und CSS3, die sich über ein sehr simples Markup gestalten lassen. Einzelne Folien werden mit HTML-Sections abgegrenzt und müssen nur noch mit Inhalten gefüllt werden.

<section>
	<h1>Reveal.js</h1>
	<h3>HTML Presentations Made Easy</h3>
</section>

Die Navigation in reveal.js erfolgt dann mit einem 2D-Steuerkreuz oder den Pfeiltasten auf der Tastatur.

reveal.js - Funktionen

Mit impress.js stellten wir euch bereits ein ähnliches HTML5-basiertes Präsentations-Framework vor. reveal.js bietet gegenüber dem optisch sehr beeindruckenden impress.js weitere interessante Funktionen.

Während bei impress.js lediglich das lineare Durchklicken durch die Slides möglich ist, bietet reveal.js zusätzlich die Möglichkeit, Slides in Slides zu verschachteln und so eine vertikale Präsentationsebene zu erzeugen, die mit den vertikalen Pfeiltasten angesteuert und mit den horizontalen Pfeiltasten vollständig übersprungen werden kann.

Mit der Escape-Taste gelangt ihr zu einer Übersicht der gesamten Präsentation. Mit Alt+Klick, könnt ihr an eine beliebige Stelle in der Präsentation zoomen. Mit einem Druck auf die b- oder die .-Taste wird die Präsentation in einen Pause-Modus geschaltet und ausgeblendet.

reveal.js Vertikale Navigation — reveal.js: Vertikale Navigation und Slideübersicht

Mit so genannten Fragment Views können einzelne Bereiche von Slides zunächst ausgeblendet sein und anschließend durch Drücken der Pfeiltasten nacheinander ein- und ausgeblendet werden. Außerdem bietet reveal.js die Möglichkeit, Code-Markdowns in die Präsentation einzubinden.

Zusätzlich dazu unterstützt das Framework zahlreiche Übergangs-Effekte wie z.B. einen 3D-Würfel-Effekt, einen Umblättereffekt oder einfache lineare Übergänge. Für das Styling der Slides sind außerdem verschiedene Themes verfügbar.

Und wem das Ganze im puren HTML zu kompliziert ist, kann auf den hauseigenen Editor RVL.IO zurückgreifen, mit dem Präsentationen zusammengeklickt und exportiert werden können.

Reveal.js unterstützt alle modernen Browser mit CSS-3D-Transform-Unterstützung. Bei mobilen Geräten kann der Safari Mobile zum Einsatz kommen. Andere Browser werden derzeit nicht unterstützt. Dafür bietet das Script durch ein spezielles Stylesheet einen PDF-Export an.

reveal.js - Fazit

reveal.js hat zwischen dem mächtigen, aber Flash- basierten und kostenpflichtigen Prezi und dem funktionsärmeren, aber optisch eindrucksvollerem impress.js durchaus eine Daseinsberechtigung. Durch die zusätzlichen Funktionen, die einfache Handhabung auf Codebasis und den hauseigenen Editor ist das Framework auch für Einsteiger gut geeignet. Lediglich die Kompatibilität mit mobilen Browsern stellt eine Einschränkung dar, an der gearbeitet werden muss.

Wer reveal.js eine Chance geben möchte, kann das auf der Projektseite von reveal.js oder auf Github tun.

Über den Autor

Ilja Zaglov ist selbstständiger Kommunikations- & Mediendesigner. Er unterstützt kleine und mittelständische Unternehmen bei der Erstellung von Online- und Offline-Medien. Neben Web-Gestaltung gehören Motion-Graphics und 3D-Inhalte zu seinen Spezialgebieten.