t3n News Entwicklung

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

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

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 , Transforms, Transitions und 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 sie schon unterstützt. Im Folgenden stellen wir euch Impress.js etwas genauer vor.

Impress.js: Cooles Präsentationtool mit HTML5 und CSS3
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 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.

Weiterführende Links:

Newsletter

Bleibe immer up-to-date. Sichere dir deinen Wissensvorsprung!

Vorheriger Artikel Zurück zur Startseite Nächster Artikel
Keine Antwort
Deine Meinung

Bitte melde dich an!

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

Jetzt anmelden

Mehr zum Thema HTML5
JavaScript-Framework für komplexe Animationen: Was das Open-Source-Projekt mo.js kann
JavaScript-Framework für komplexe Animationen: Was das Open-Source-Projekt mo.js kann

JavaScript und CSS3 haben die Grundlage für anspruchsvolle Animationen geschaffen. Mit dem Framework mo.js ist mehr möglich als nur einfache Easing-Funktionen. Ihr habt jetzt die Möglichkeit, euch … » weiterlesen

Jetzt „Apps mit HTML5, CSS3 und JavaScript“ von Rheinwerk gratis sichern! [t3n-Aktion]
Jetzt „Apps mit HTML5, CSS3 und JavaScript“ von Rheinwerk gratis sichern! [t3n-Aktion]

Wer mobile Anwendungen entwickeln möchte, findet in „Apps mit HTML5, CSS3 und JavaScript“ von Rheinwerk eine hilfreiche Lektüre für den Start. Als Neuabonnent kannst du dich über eines der … » weiterlesen

Virtual Reality im Browser: Mozilla stellt Open-Source-Framework für VR-Websites vor
Virtual Reality im Browser: Mozilla stellt Open-Source-Framework für VR-Websites vor

Mozillas A-Frame soll es deutlich einfacher machen, Virtual-Reality-Websites für den Desktop, Smartphones und VR-Brillen zu entwickeln. Wir werfen einen ersten Blick auf das Open-Source-Framework. » weiterlesen

Alle Hefte Jetzt abonnieren – für nur 35 €

Kennst Du schon unser t3n Magazin?