Vorheriger Artikel Nächster Artikel

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.

NEU: Lass dir diesen Artikel vorlesen
Ein Service von t3n, in Kooperation mit Narando.
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 droc777 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
Der schönste Tag eures Lebens: W3C stellt HTML5 fertig
Der schönste Tag eures Lebens: W3C stellt HTML5 fertig

Heute schon in HTML5 geschrieben? Spätestens jetzt ist der richtige Zeitpunkt dafür, denn die W3C hat HTML5 zur „Recommendation“ gekührt, was de facto den Abschluss des Standardisierungs-Prozes … » weiterlesen

Ist Flash tot? Zehn beeindruckende Web-Experimente ohne Flash
Ist Flash tot? Zehn beeindruckende Web-Experimente ohne Flash

Lange Zeit war Flash das Nonplusultra der Web-Animation. Diese zehn Experimente zeigen euch eindrucksvoll, dass das schon sehr bald der Vergangenheit angehören könnte. » weiterlesen

Vom Code zur App: Programmieren lernen mit coolen Timelapse-Videos
Vom Code zur App: Programmieren lernen mit coolen Timelapse-Videos

TheCodePlayer zeigt euch im Zeitraffer, wie Projekte in HTML5, CSS und JavaScript entstehen. Links seht ihr wie der Code eingegeben wird, während das Projekt auf der rechten Seite mehr und mehr … » weiterlesen

Kennst Du schon unser t3n Magazin?

t3n 38 jetzt kostenfrei probelesen! Alle Inhalte des t3n Magazins Diesen Hinweis verbergen