Vorheriger Artikel Nächster Artikel

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

reveal.js ist ein , 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: Präsentationen auf HTML5- und CSS3-Basis
 reveal.js bietet beeindruckende HTML5-Präsentationen auf Basis von und , 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 in Aktion
reveal.js in Aktion

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 big

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.

NEU: Lass dir diesen Artikel vorlesen
Ein Service von t3n, in Kooperation mit Narando.
Vorheriger Artikel Zurück zur Startseite Nächster Artikel
2 Antworten
  1. von Thomas Meyer am 04.12.2012 (11:32 Uhr)

    Sieht schick aus! Der Sinn verschachtelter Slides erschließt sich mir allerdings nicht ganz.

    Antworten Teilen
  2. von Rico Weigand am 04.12.2012 (19:10 Uhr)

    Genau das, was ich gesucht habe. Mit dem editor oben perfekt.

    Antworten Teilen
Deine Meinung

Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Mehr zum Thema Frameworks
CSS3: Coole Animationen für im Grid angeordnete Bilder
CSS3: Coole Animationen für im Grid angeordnete Bilder

Mit HTML5 und CSS3 stehen Webworkern viele Möglichkeiten zur Verfügung, um ihre Webseiten noch spannender und interaktiver zu machen. Wir stellen dir einige nette Effekte vor, mit denen du dein … » weiterlesen

Dropdown-Menüs: 20 Demos von simpel bis schick – inklusive Download und Tutorials
Dropdown-Menüs: 20 Demos von simpel bis schick – inklusive Download und Tutorials

HTML5 und CSS3 bilden die Standards, die Webseiten- und Mobile-Web-Entwicklung aktuell prägen. Es gibt unzählige Variationen von Dropdown-Menüs und Tutorials auf Basis dieser Technologien – vor … » weiterlesen

Die 10 beliebtesten Artikel der Woche: Themenwoche Produktivität, Black Friday, WordPress-Sicherheitslücke
Die 10 beliebtesten Artikel der Woche: Themenwoche Produktivität, Black Friday, WordPress-Sicherheitslücke

Es ist wieder Wochenende und die Woche neigt sich dem Ende. Dominiert vom Black Friday, einer großen WordPress-Sicherheitslücke und der t3n-Themenwoche Produktivität blicken wir zurück auf viele … » weiterlesen

Kennst Du schon unser t3n Magazin?

t3n 38 jetzt kostenfrei probelesen! Alle Inhalte des t3n Magazins Diesen Hinweis verbergen