Entwicklung & Design

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

Turn.js bringt den lange nur Flash 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. 

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.

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

7 Kommentare
flake_mckay
flake_mckay

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
Frank Hamm Webdesign

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

Antworten
Steffen
Steffen

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

@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
phil
phil

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

Antworten

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

Bitte schalte deinen Adblocker für t3n.de aus!

Hey du! Schön, dass du hier bist. 😊

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

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

Danke für deine Unterstützung.

Digitales High Five,
Stephan Dörner (Chefredakteur t3n.de) & das gesamte t3n-Team

Anleitung zur Deaktivierung