Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Entwicklung & Design

Impress.js: Cooles Präsentationtool mit HTML5 und CSS3

    Impress.js: Cooles Präsentationtool mit HTML5 und CSS3
Impress.js

Impress.js ist eine schlanke und schmucke Open-Source-Lösung unter MIT-Lizenz für die Erstellung von etwas anderen Präsentationen, die nicht nur langweilige Folien nacheinander abspulen. Somit ist es eine super Alternative zum Dienst Prezi.com. Über HTML5, CSS3 Transforms, Transitions und JavaScript kann man seine Ideen mit Impress.js auf elegante Art und Weise mit Hilfe rotierender und skalierender Texte aufpeppen. Sogar 3D-Texteffekte lassen sich einbauen, sofern der Browser sie schon unterstützt. Im Folgenden stellen wir euch Impress.js etwas genauer vor.

Impress.js Screenshot: Folienbeispiel

Frische Technologie für schicke Präsentation

Wie der Entwickler Bartek Szopka selbst bei Github schreibt, ging es ihm bei Impress.js in erster Linie darum neue Techniken auszuprobieren, die gerade erst beginnen, in den aktuellen Browsern zu erscheinen. Deshalb ist es keine große Überraschung, dass Impress.js noch nicht mit allen Browsern funktioniert. Zurzeit läuft Impress.js im aktuellen Chrome-Browser, Safari 5.1 und Firefox 10. Opera und Internet Explorer klappen bisher nicht. Auch mobile Endgeräte sind noch außen vor, aber es handelt sich auch um das erste Release von Impress.js und die Situation sieht sicher bald ganz anders aus.

Impress.js Screenshot: Texteffekte

Funktionalitäten und Techniken bei Impress.js

Bislang enthält Impress.js Basisfunktionalitäten um per Tastatur von Folie zu Folie zuwechseln und schöne Folienübergänge mit animierten Texten einzusetzen. Eine simple Fallbacklösung für Browser, die verwendete Techniken noch nicht unterstützen ist auch schon dabei. Da Impress.js der HTML5 Spezifikation einschließlich classList und Dataset API folgt, müssen diese im Browser auch verfügbar sein. Da es ja JavaScript APIs sind, ist hier allerdings Nachrüsten über Polyfill-Bibliotheken möglich, die älteren Browsern auf die Sprünge helfen.

Impress.js Screenshot: Rotieren und Skalieren

Alle Positionierungen der Präsentationselemente in 3D benötigen CSS 3D Transforms Unterstützung. Die Folienübergänge basieren auf CSS Transitions. Folglich muss der Browser diese beiden Techniken unterstützen, damit Impress.js richtig zur Geltung kommt. Zudem benötigt der Browser auch noch etwas Hardwarebeschleunigung um die Animationen wirklich flüssig abzuspielen. Auch die Grafikkarte sollte ordentlich sein um in den vollen Genuss der Transitions zu kommen.

Und wie baut man eigene Präsentationen mit Impress.js?

Für eine eigene Präsentation muss man sich zunächst den Quellcode zu Impress.js bei Github herunterladen. Damit hat man einen übersichtlichen Ordner indem man eine CSS-Datei, eine JavaScript-Datei, eine index.html und einen ReadMe-File findet. Jetzt öffnet man einfach die index.html im HTML-Editor der Wahl und kann mit dem Anpassen des Impress.js-Templates beginnen.

Impress.js Dateien

Über das Kopieren oder Ändern von <div> Tags deren Klassennamen wie „step slide“ die Verwendung erahnen lassen kann man die Vorlage an seine Bedürfnisse anpassen und eigene Texte zwischen die Tags kopieren.

Impress.js Quellcode: index.html

Zugegeben – es gibt noch keine Benutzeroberfläche für die Erstellung der eigenen Präsentation sondern man muss dafür ein wenig im HTML-Quellcode umhersurfen. Daher ist Impress.js bisher eher für Profis geeignet, da die Endanwenderfreundlichkeit so noch etwas auf der Strecke bleibt. Aber trotzdem ist Impress.js auch so schon eine tolle Möglichkeit mit innovativen Techniken kurze aber spektakuläre Präsentationen mit Eye-Catcher-Effekt zu erstellen – auch wenn es noch etwas aufwändig ist.

Impress.js Screenshot: presentation tool with HTML5 and CSS3

1 von 9

Zur Galerie

Weiterführende Links:

Finde einen Job, den du liebst

Schreib den ersten Kommentar!

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

Abbrechen