Denis Potschien 2. August 2012

Eindrucksvolle Präsentationen mit Impress.js

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010...

Präsentationen sind nicht immer schön gestaltet und beeindrucken auch eher selten durch ihre Aufmachung. Wer gerne eindrucksvoller präsentieren möchte und auf klassische Anwendungen verzichten kann, sollte sich Impress.js anschauen. Das Tool macht aus einer einfachen HTML-Seite eine dynamische Präsentation, die allein schon durch ihre Übergänge beeindruckt.


Demo von Impress.js

Die Idee von Impress.js erinnert stark an den Präsentationsdienst Prezi, der auf ähnliche Weise funktioniert. Statt eine Präsentation auf verschiedenen Folien unterzubringen, die im schönsten Fall nett überblenden, werden bei Impress.js alle Inhalte auf einer Seite untergebracht. Per Animation werden einzelne Bereiche per Zoom in den Anzeigebereich des Browserfensters in Bewegung gebracht.

Inhalte erstellen und Impress.js anwenden

Zunächst einmal werden die einzelnen Inhalte der Präsentation im HTML-Dokument untergebracht. Alle Inhalte müssen innerhalb eines Containers mit der ID „impress“ liegen. Darin enthalten sind alle Schritte der Präsentation (in einer klassischen Präsentation wären es die einzelnen Folien). Jedem Schritt muss die Klasse „step“ zugewiesen werden.

Darüber hinaus macht man für jeden Schritt über Data-Dash-Attribute zusätzliche Angaben zur Position, zu Winkel und Zoomfaktor:

<div id="impress">
  <div class="step" data-x="0" data-y="0">
    Inhalt des ersten Schrittes
  </div>
  <div class="step" data-x="1000" data-y="0" data-scale="2" data-rotate="90">
    Inhalt des zweiten Schrittes
  </div>
</div>

Das Beispiel zeigt zwei Schritte einer Präsentation. Über „data-x“ und „data-y“ werden die einzelnen Elemente innerhalb der Präsentationsfläche positioniert. Das zweite Element wird per „data-rotate“ gedreht und per „data-scale“ auf die doppelte Größe des ersten Elementes vergrößert.

Per Pfeiltasten wechsekt man zwischen den einzelnen Präsentationsschritten. Eine Animation sorgt für den Übergang zwischen den beiden Schritten. Der jeweils ausgewählte Schritt wird dann im Zentrum des Browserfensters ohne Drehung und Zoom dargestellt.

Damit Impress.js auch läuft, muss am Ende des HTML-Dokumentes noch die JavaScript-Datei eingebunden und das Script gestartet werden:

<script src="impress.js"></script>
<script>impress().init();</script>

3D-Effekt und Browserunterstützung

Auch 3D-Effekte können bei den animierten Übergangen mit eingebaut werden. Statt einer Rotatation mit „data-rotate“ lassen sich Elemente perspektivisch drehen:

<div id="impress">
  <div data-x="0" data-y="0">
    Inhalt des ersten Schrittes
  </div>
  <div data-x="1000" data-y="0" data-scale="2" data-rotate-x="15" data-rotate-y="15" data-rotate-z="30">
    Inhalt des zweiten Schrittes
  </div>
</div>

Über die Angabe dreier verschiedener Winkel wird das Element in seiner Perspektive verändert. Auf diese Weise können sehr dynamische und abwechslungsreiche Übergänge zwischen den einzelnen Schritten erzeugt werden.


3D-Übergang mit Impress.js

Impress.js nutzt für alle Effekte die verschiedenen Möglichkeiten von CSS3, weshalb das Tool nur auf aktuellen Browsern funktioniert. Gerade der Einsatz von CSS3-3D-Transforms für die perspektivische Drehung wird von einigen Browsern (Internet Explorer und Opera) noch nicht unterstützt.

Außerdem setzt Impress.js die HTML5-APIs „dataset“ und „classList“ ein, die ebenfalls nur von aktuellen und nicht allen (wieder Internet Explorer) Browsern unterstützt werden.

Impress.js und Prezi

Im Gegensatz zum kommerziellen Anbieter Prezi ist der Einsatz von Impress.js komplett kostenlos. Es ist unter der MIT– und GPL-Lizenz veröffentlicht. Außerdem läuft Impress.js auf dem eigenen Webserver und kommt ohne Anbieterkennzeichnung daher – Unter allen Aspekten handelt es sich also um eine lohnenswerte Alternative zu Prezi.

Fazit

Impress.js sorgt in der Tat für sehr eindrucksvolle Präsentationen. Es gibt zwar kein Manual für die Handhabung, dafür aber eine kommentierte Demo. Da das Tool sehr einfach zu verwenden ist, wird man sich mit Hilfe der Kommentare sehr schnell einlesen und eigene Präsentationen erstellen können.

(dpe)

Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet. Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.

3 Kommentare

  1. Basierend auf dem Code von impress.js gibt es auch einen jquery Port um damit Webseiten und nicht nur Präsentationen zu erstellen:

    http://shama.github.com/jmpress.js/#/home

  2. Find ich ganz interessant. Man müsste mal prüfen, ob das ganze auch ohne Javascript und rein mit CSS3 funktioniert.

Tut uns leid, aber die Kommentare sind geschlossen...

Kennst du schon unseren Newsletter?

Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.

Cookies

Weitere Informationen zu den Auswahlmöglichkeiten findest du hier. Dazu musst du zunächst keine Auswahl treffen!

Um Dr. Web zu besuchen, musst du eine Auswahl treffen.

Deine Auswahl wurde gespeichert!

Informationen zu den Auswahlmöglichkeiten

Was du erlaubst!

Um fortfahren zu können, musst du eine Auswahl treffen. Nachfolgend erhältst du eine Erläuterung der verschiedenen Optionen und ihrer Bedeutung.

  • Ich stimme zu:
    Du erlaubst uns das Setzen aller Cookies, die wir in unseren Datenschutzhinweisen genannt haben. Dazu gehören Tracking- und Statistik-Cookies. Aus dem Tracking per Google Analytics bieten wir auf der Seite Datenschutz ein Opt-Out, also die Möglichkeit der Abmeldung, an.
  • Ich stimme nicht zu:
    Wir verzichten bei dieser Option auf den Einsatz von Google Analytics. Die für den Betrieb von Dr. Web notwendigen Cookies werden aber dennoch gesetzt. Einzelheiten entnimmst du bitte den Datenschutzhinweisen

Du kannst deine Cookie-Einstellungen jederzeit hier ändern: Datenschutz. Impressum

Zurück