201217Mai

Presenteer.js: Kompakte HTML5-Präsentationen

Frameworks und Tools für HTML/CSS-Präsentation gibt es mittlerweile in Hülle und Fülle. Vertreter wie Reveal.js, Impress.js oder Deck.js bieten auch gleich eine Palette an Effekten für die Übergänge von Folien an. Wer es etwas kompakter mag, kann sich das Tool Presenteer.js: ansehen, mit dem sich schon mit einer Zeile Code fertige Präsentation erzeugen lassen.

Presenteer.js

Die Präsentationen basieren auf jQuery und eine fertige Implementierung kann etwa so aussehen:

  • <div class="presentationcontainer" id="presentationcontainer1">
  • <div class="presentationcanvas" id="presentation1">
  • <div>First slide.</div>
  • <div>Second slide.</div>
  • <div>Third slide.</div>
  • <div>Fourth slide.</div>
  • </div>
  • </div>
  •  
  • var presentation = new Presenteer(
  • "#presentation1",
  • $("#presentationq > div"),
  • { followElementTransforms: false }
  • );

Presenteer bietet die Möglichkeit, Slides auch mit Transformationen zu belegen. Auf der Seite des Skripts finden sich Beispiele, bei denen etwa Rotationen als Übergänge eingesetzt werden. Zudem können Presenteer-Präsentationen auch in den Vollbild-Modus geschaltet werden und Events für Folien-Interaktionen gibt es ausreichend. Weitere Details finden sich auf der Website des Projekts.