Blättereffekt mit javascript und turn.js

Für nicht kommerzielle Zwecke lässt sich mit wenig Aufwand ein Blättereffekt im Browser mit HTML 5 und Javascript erzeugen.

 

Die turn.js Datei kann man unter der „noncommercial BSD Lizenz“ kostenlos herunterladen. Für den kommerziellen Gebrauch ist es nötig eine Lizenz zu kaufen. Turn.js funktioniert sowohl auf mobilen Geräten, wie dem iPad oder iPhone, als auch auf älteren Browsern, die allerdings eine weitere Datei benötigen. Wer mehr erfahren möchte schaut am besten auf der Entwickler Seite vorbei, die unten verlinkt ist.

Blättereffekt installieren


Für den besagten Blätter- beziehungsweise Bucheffekt benötigt man lediglich jQuery, die turn.js Datei und das hier angegebene HTML Gerüst.

jQuery und turn.js einbinden

Zu aller erst muss die jQuery Bibliothek und die turn.js Datei zwischen den head – Tags eingetragen werden.

<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="../../turn.min.js"></script>
</head>

HTML Konstrukt

Um nun den gewünschten „Bucheffekt“ zu erhalten verwendet muss man folgende HTML Konstruktion verwenden.

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

Quelle: http://www.turnjs.com/#getting-started

Links

Über den Autor:

Mein Name ist Fabian Geier, Gründer von SourceBlogging, Läufer und WordPress-Enthusiast. Du findest mich vor allen Dingen auf meiner Webseite.