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:

1
2
3
4
5
6
7
8

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

1
2

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

1
2
3
4
5
6
7
8

<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

Seit 2005 ist er 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.

• Web
|
• Facebook
|
• Google+
|
• More Posts (156)