Entwicklung & Design

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

Reveal.js

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 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.

Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

3 Kommentare
Thomas Meyer
Thomas Meyer

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

Antworten
Rico Weigand

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

Antworten

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.