Mit turn.js erhält jeder Frontend-Entwickler nun die Möglichkeit den Flip-Book-Effect auch ohne Flash zu benutzen und das sogar auch auf mobilen Geräten.
Mithilfe von turn.js lassen sich sehr einfach Magazine, Kataloge oder auch ganze Bücher im Web anzeigen und das ganze auch noch mit den beliebten Flip-Book-Effect. Dafür benötigt turn.js lediglich jQuery 1.3+.
Los gehts
Das Grundgerüst sieht in turn.js folgendermaßen aus:
<div id="flipbook"> <div> Turn.js </div> <div></div> <div> Page 1 </div> <div> Page 2 </div> <div> Page 3 </div> <div> Page 4 </div> <div></div> <div></div> </div>
Das ganze funktioniert recht einfach. Um ein Flipbook anzulegen muss man ein div mit einer beliebigen ID versehen. In diesem Container liegen dann die einzelnen Seiten (jede Seite hat sein eigenes div). Gibt man so einem div die Klasse hard weiß turn.js, dass diese Seite das Hardcover ist. Es werden zwei hard Seiten hintereinander definiert, da auch die Rückseiten als eigene Seite zählt.
Um das Flipbook zu initialisieren muss man nur noch turn.js die ID des Flipbooks geben.
<script type="text/javascript">
$("#flipbook").turn({
width: 400,
height: 300,
autoCenter: true
});
</script>Browser Support
- Safari 5
- Firefox 10
- Chrome 16
- IE 8, 9, 10
- Alle iOS Geräte (iPad, iPhone, iPod)
- Android (Chrome for Android)
Fazit
Das ganze macht einen sehr guten ersten Eindruck. Beim genauer Hinsehen wird man feststellen, dass das ganze noch Platz für Optimierungen lässt. Gerade das umblättern erzeugt manchmal unschöne Effekte. Dazu kommt, dass das ganze nur privat kostenlos nutzbar ist (kommerzielle Lizenz ab 99 US-Dollar).
Für Frontend-Entwickler stellt es aber eine gute Grundlage, um daraus tolle Ergebnisse erzielen.