turn.js Flip-Book-Effect mit HTML5

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.

Projektseite von turn.js

 


3D Modelle mit CSS mit Tridiv

Dank CSS3 und der Hardwarebeschleunigung ergeben sich mit CSS immer mehr Möglichkeiten. Eine davon sind 3D Modelle. Heute stelle ich euch einen Online Editor vor mit dem ihr euch ganz einfach eure eigenen 3D Modelle zusammen bauen könnt. Das ist kann ein sehr guter Einstieg in die Materie sein.

Weiterlesen


Pfeiltasten Navigation mit Javascript

Um eine gute Navigation zu bauen kann es durch aus sinnvoll sein, sie per Tastatur steuerbar zu machen. So könnte man zwischen den einzelnen Seiten mittels Pfeiltasten hin und her wechseln zum Beispiel bei einem Blog. Ich zeige euch wie ihr das ganze umsetzen könnt.

Weiterlesen