Das könnte dich auch interessieren

Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

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

Finde einen Job, den du liebst zum Thema Webdesign, Webentwickler

5 Reaktionen
phil
phil

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

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

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

Frank Hamm Webdesign
Frank Hamm Webdesign

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

Antworten

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

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

Abbrechen