Anzeige
Anzeige
UX & Design
Artikel merken

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

Von Monika Steinberg
2 Min. Lesezeit
Anzeige
Anzeige
Impress.js

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

Anzeige
Anzeige

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.

Anzeige
Anzeige

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.

Anzeige
Anzeige

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.

Anzeige
Anzeige
Impress.js Dateien

1 von 9

Weiterführende Links:

Mehr zu diesem Thema
Fast fertig!

Bitte klicke auf den Link in der Bestätigungsmail, um deine Anmeldung abzuschließen.

Du willst noch weitere Infos zum Newsletter? Jetzt mehr erfahren

Anzeige
Anzeige
5 Kommentare
Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

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

Bitte schalte deinen Adblocker für t3n.de aus!
Hallo und herzlich willkommen bei t3n!

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team von mehr als 75 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Schon jetzt und im Namen der gesamten t3n-Crew: vielen Dank für deine Unterstützung! 🙌

Deine t3n-Crew

Anleitung zur Deaktivierung
Artikel merken

Bitte melde dich an, um diesen Artikel in deiner persönlichen Merkliste auf t3n zu speichern.

Jetzt registrieren und merken

Du hast schon einen t3n-Account? Hier anmelden

oder
Auf Mastodon teilen

Gib die URL deiner Mastodon-Instanz ein, um den Artikel zu teilen.

Anzeige
Anzeige