Drücke die Tasten ◄ ► für weitere Artikel  

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

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

79 Shares bis jetzt – Dankeschön!

Bewerten
VN:F [1.9.22_1171]
3 Antworten
  1. von Thomas Meyer am 04.12.2012 (11:32Uhr)

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

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

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

  3. von jQuery: 13 Plugins für euer nächstes W… am 09.11.2013 (10:54Uhr)

    […] ist derzeit in Version 2.2 und wird weiterentwickelt. Ihr könnt einen ähnlichen Effekt auch mit reveal.js umsetzen, allerdings wird dabei im Gegensatz zu FerroSlider der gesamte Viewport für die […]

Deine Meinung

Bitte melde dich an!

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

Jetzt anmelden

Mehr zum Thema Frameworks
t3n-Video-Workshop: Einstieg in 2D-Transformationen mit CSS3
t3n-Video-Workshop: Einstieg in 2D-Transformationen mit CSS3

Heute startet auf t3n.de eine neue Serie, in der wir euch in Zusammenarbeit mit Galileo Press Video-Workshops zu verschiedenen Themen für Webentwickler und Digitalarbeiter präsentieren.... » weiterlesen

Responsive Webdesign: Browserunterstützung und Tools [t3n-Video-Workshop]
Responsive Webdesign: Browserunterstützung und Tools [t3n-Video-Workshop]

Heute führen wir auf t3n.de die Video-Serie weiter, in der wir euch in Zusammenarbeit mit Galileo Press Video-Workshops zu verschiedenen Themen für Webentwickler und Digitalarbeiter präsentieren... ... » weiterlesen

t3n-Aktion: „Schrödinger lernt HTML5, CSS3 und JavaScript“ [+Verlosung]
t3n-Aktion: „Schrödinger lernt HTML5, CSS3 und JavaScript“ [+Verlosung]

Du willst in die Webentwicklung einsteigen und HTML5, CSS3 und JavaScript lernen? Das etwas andere Fachbuch „Schrödinger lernt HTML5, CSS3 und JavaScript“ vermittelt mit Witz die Theorie und... » weiterlesen

Kennst Du schon unser t3n Magazin?

t3n-Newsletter
Top-Themen der Woche für Web-Pioniere
Jetzt kostenlos
anmelden
Diesen Hinweis verbergen