t3n News Entwicklung

Turn.js: Page-Flip-Effekte mit HTML5 statt Flash

Turn.js: Page-Flip-Effekte mit HTML5 statt Flash

Turn.js bringt den lange nur vorbehaltenen Flip-Book-Effekt ins moderne Web und erlaubt Webworkern, ihn auch auf mobile Geräte zu übertragen. Was das Skript kann und wie man es benutzt, erfahrt ihr hier. 

Turn.js: Page-Flip-Effekte mit HTML5 statt Flash

Mit turn.js könnt ihr etwas machen, das lange Zeit nur in Flash möglich war: Kataloge, Bücher und Magazine als „Buch“ zum Durchblättern zur Verfügung stellen.

turn.js im Einsatz

Die Handhabung des Skripts ist äußerst simpel. Mit dem folgenden Code könnt ihr die ersten Experimente mit turn.js beginnen.

<div id="flipbook">
<div class="hard"> Turn.js </div>
<div class="hard"></div>
<div> Page 1 </div>
<div> Page 2 </div>
<div> Page 3 </div>
<div> Page 4 </div>
<div class="hard"></div>
<div class="hard"></div>
</div>

<script type="text/javascript">
$("#flipbook").turn({
width: 400,
height: 300,
autoCenter: true
});
</script>

Zur Steuerung des Skripts liefert turn.js eine eigene API, die über einige Methoden und Ereignis-Listener verfügt. So werden nicht nur umblättern und Zoom via Skript möglich, sondern auch das dynamische Nachladen und Entfernen von einzelnen Seiten.

Turn.js unterstützt die wichtigsten Browser: Safari ab Version 5, Chrome ab Version 16, Firefox ab Version 10 und Internet Explorer ab Version 8. Aber auch mobile Geräte schauen bei dem Skript nicht in die Röhre: Alle iOS-Geräte sowie Android-Geräte mit dem Chrome-Browser für Android können turn.js wiedergeben.

Turn.js: Guter Eindruck mit Wunsch nach mehr

Insgesamt liefert turn.js ansehnliche Ergebnisse, auch wenn die Steuerung an manchen Stellen ein wenig geschmeidiger von der Hand bzw. von der Maus gehen könnte. Die Website von turn.js suggeriert ein sehr einfach zu bedienendes Skript, das mit wenigen Klicks bombastische Ergebnisse erzielt. Diesem Anspruch wird turn.js aber nicht ganz gerecht. Denn dafür, dass das Skript nur für private Zwecke kostenfrei zur Verfügung steht (kommerzielle Lizenz ab 99 US-Dollar), liefert der Autor nur sehr wenige Beispiele und keinerlei Design-Vorlagen.

Turn.js sollte eher als Basis für etwas erfahrenere Webworker und Designer gesehen werden. Denn mit ein bisschen Know-how und ein bisschen Liebe zum Detail, lassen sich mit dem nur 10kb leichten Skript tolle Ergebnisse erzielen.

Bevor man wieder auf eine Flash-Lösung setzt, lohnt ein Blick auf turn.js allemal. Die aktuelle Version des Skripts findet ihr auf der Projektseite von turn.js.

Newsletter Newsletter

Abonniere unseren Newsletter und erhalte einen exklusiven Artikel aus dem aktuellen t3n Magazin.

Jetzt lesen: t3n Newsletter Nr. 571

Vorheriger Artikel Zurück zur Startseite Nächster Artikel
5 Antworten
  1. von flake_mckay am 08.02.2013 (09:29 Uhr)

    Leider konnte ich mir das Skript noch nicht in Aktion ansehen. Könnt ihr nach eurem Test Angaben zu etwaigen Konflikten mit dem Design Patent von Apple ( http://bits.blogs.nytimes.com/2012/11/16/apple-now-owns-the-page-turn/ ) machen?

    Antworten Teilen
  2. von Frank Hamm Webdesign am 08.02.2013 (10:19 Uhr)

    Such schon länger nach einer Möglichkeit sowas ohne Flash umzusetzen. Danke! Ich werde es ganz sich ausprobierenn

    Antworten Teilen
  3. von Steffen am 08.02.2013 (11:27 Uhr)

    Und wieder einmal muss ich euch korrigieren. Turn.js arbeitet nicht mit HTML5 sondern mit viel JavaScript und CSS3.

    Btw, Turn.js ist nicht unbedingt der Erste der Bücher auf diese Weise darstellt. Das Buch Senghor on the Rocks von Christoph Benda verwendete so eine Umblättertechnik bereits 2008.

    Antworten Teilen
  4. von starptech am 08.02.2013 (15:05 Uhr)

    @Steffan da gebe ich dir recht aber man kann CSS3 und die diversen neuen Javascript-Apis schon als Teilmenge von HTML 5 sehen, denn mit HTML5 wird auch oft sprachgebräuchlich die neuen Features des Web bezeichnet.
    Siehe : http://commons.wikimedia.org/wiki/File:HTML5-Spezifikations-%C3%9Cbersicht.svg

    Antworten Teilen
  5. von phil am 12.02.2013 (17:34 Uhr)

    Anzumerken wäre, dass die kostenfreie Privatlizenz nur die Version 3 beinhaltet, die viele hier angesprochenen Features noch nicht beinhaltet.

    Antworten Teilen
Deine Meinung

Bitte melde dich an!

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

Jetzt anmelden

Mehr zum Thema Flash
Bye Bye Flash: Warum HTML5 zum Standard in der Online-Werbung wird
Bye Bye Flash: Warum HTML5 zum Standard in der Online-Werbung wird

Der Flash-Player von Adobe war lange Zeit das Standardprogramm für die Darstellung grafischer und bewegter Inhalte im Internet. Das ändert sich derzeit: Die Werbebranche steigt bei der … » weiterlesen

Nutzt du Adobes Flash-Player? Dann installiere dringend das neue Sicherheitsupdate
Nutzt du Adobes Flash-Player? Dann installiere dringend das neue Sicherheitsupdate

Der Flash-Player lebt: Adobe hat dem unbeliebten Browser-Plugin ein Sicherheitsupdate beschert, mit dem 35, teils kritische Sicherheitslücken geschlossen werden sollen. Nutzer sollten das Update … » weiterlesen

Chrome pausiert Flash-Werbung automatisch: Ab dem 1. September ist es soweit [Update]
Chrome pausiert Flash-Werbung automatisch: Ab dem 1. September ist es soweit [Update]

Google macht ernst: Ab September 2015 sollen Flash-Animationen automatisch pausiert werden. Wer noch immer auf Flash-Werbung setzt, sollte daher schnell reagieren. » weiterlesen

Alle Hefte Jetzt abonnieren – für nur 35 €

Kennst Du schon unser t3n Magazin?