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.

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
Teilaus für Flash: Facebook wechselt bei Videos auf HTML5
Teilaus für Flash: Facebook wechselt bei Videos auf HTML5

Facebook hat den Wechsel von Flash auf HTML5 vollzogen – vorerst allerdings nur bei Videos. Bei Spielen setzt das Social Network weiterhin auf Flash und will mit Adobe zusammenarbeiten. » weiterlesen

War‘s das für Flash? Selbst Adobe rät Web-Entwicklern jetzt zu HTML5
War‘s das für Flash? Selbst Adobe rät Web-Entwicklern jetzt zu HTML5

Die Tage von Flash scheinen schon lange gezählt, so ganz totzukriegen scheint der Standard aber nicht zu sein. Ob daran die jüngste Ankündigung von Adobe etwas ändert? » weiterlesen

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

Alle Hefte Jetzt abonnieren – für nur 35 €

Kennst Du schon unser t3n Magazin?