Kategorien
JavaScript & jQuery Programmierung

Turn.Js: Websites mit Zeitungsoptik und Blättereffekt

Wenn es darum geht, Druckerzeugnisse wie Magazine oder Zeitungen auf einer Website zu veröffentlichen, wird gerne auf Umblättereffekte zurückgegriffen. So kann eine möglichst realistische Funktionalität sowie ein entsprechendes Erscheinungsbild gewährleistet werden. Auf der Grundlage von Flash entstanden entsprechende Templates, die sich leicht anpassen ließen. In Zeiten von HTML5 und CSS3, in denen Flash immer mehr in den Hintergrund gerät, sind auch für Umblättereffekte andere Lösungen gefragt. Das jQuery-Plugin Turn.js ist eine solche.


Turn.js

Turn.js einbinden und anwenden

Turn.js wandelt DIV-Container in virtuelle Zeitschriften mit Umblättereffekt um. Die Einbindung und individuelle Anpassung sind einfach umzusetzen. Zunächst müssen jQuery und das Plugin im HTML-Kopf aufgerufen werden:

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

Anschließend werden per HTML die einzelnen Seiten angelegt. Dazu wird für jede Seite ein DIV-Container erzeugt. Alle Seiten-Container müssen sich in einem übergeordneten Container befinden, auf den Turn.js angwendet wird:

<div id="magazin">
  <div class="seite1">Hier steht der Inhalt von Seite 1.</div>
  <div class="seite2">Hier steht der Inhalt von Seite 2.</div>
  <div class="seite3">Hier steht der Inhalt von Seite 3.</div>
  <div class="seite4">Hier steht der Inhalt von Seite 4.</div>
</div>

Der Inhalt der einzelnen Seiten kann ganz individuell gestaltet werden. Es können unter anderem Bilder, Tabellen und Listen dargestellt werden. Wichtig ist nur, dass alle Seiten-Container dieselbe Größe haben. Ist ein Container zu groß, kommt es beim Umblättern zu fehlerhaften Darstellungen. Die eigentliche Seite wird jedoch immer auf die Größe des Magazins zurechtgeschnitten.

Um Turn.js auf einen Container anzuwenden, wird dem entsprechenden Element das Plugin zugewiesen:

<script type="text/javascript">

  $("#magazin").turn({
    display: "double"
  });

</script>

Anschließend lassen sich die angelegten DIV-Container wie ein Magazin durchblättern. Dazu zieht man jeweils eine Seitenecke nach links oder rechts, um vor- beziehungsweise zurückblättern zu können. Die Ecken bilden beim Überfahren mit der Maus Eselsohren. Es gibt etliche Einstellungsmöglichkeiten, um die Umblätterfunktion anzupassen.


Beispiel für den Einsatz von Turn.js

Turn.js individuell anpassen

Über den Aufruf „.turn()“ können dem Plugin verschiedene Optionen hinzugefügt werden. Die Option „display“ beeinflusst beispielsweise, ob immer nur eine Seite („single“) dargestellt wird oder ob – wie es bei einem gedruckten Magazin der Fall ist – Doppelseiten („double“) dargestellt werden sollen.

Über die Option „page“ wird angegeben, welche Seite beim Laden des HTML-Dokumentes angezeigt werden soll. Diese Option ist nützlich, falls nicht die Titelseite, sondern eine aufgeschlagene Innenseite geladen werden soll. Über „duration“ wird die Dauer der Umblätteranimation festgelegt. Beim Wert Null wird beim Loslassen der Maus ohne Animation die Seite gewechselt.

Kostenfreie und kostenpflichtige Version

Derzeit ist Turn.js in zwei Versionen erhältllich. Die ältere Version 3 ist für nicht-kommerzielle Projekte kostenfrei. Kostenpflichtige Projekte müssen 45 US-Dollar für eine Lizenz bezahlen. Die neuere Version 4 gibt es nur in einer kostenpflichtigen Version ab 99 US-Dollar. Beide Lizenzen berechtigen zum Einsatz des Plugins auf bis zu fünf Domains.

Die neuere Version hat einige zusätzliche Features. So  können Übergänge für Hardcover-Umschläge simuliert werden. Außerdem gibt es eine Zoomfunktion sowie die Möglichkeit, Seiten in unterschiedlicher Größe einzubinden.

Browser-Support

Turn.js funktioniert in allen aktuellen Browsern, inklusive dem Internet Explorer 9. Außerdem werden auch mobile Geräte – sowohl Android als auch iOS – unterstützt.

(dpe)

Von Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet.

Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.

4 Antworten auf „Turn.Js: Websites mit Zeitungsoptik und Blättereffekt“

Sieht ganz nett aus. Auf dem Smartphone konnte es mich aber noch nicht wirklich überzeugen. Dort geht leider kein Vollbildmodus. Zumindest nicht mit dem Democontent. Ich werde das Projekt aber im Auge behalten.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.