kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

Turn.js – Page-Flip-Effekt mit jQuery und HTML5 (und ohne Flash)

Vor einigen Jahren war der sog. Page-Flip-Effekt sehr populär um mit Hilfe von Flash digitale und realistisch anmutende Bücher zu erstellen. Der Trend flaute in den letzten Jahren zunächst ein wenig ab um dann mit der zunehmenden Verbreitung von Tablets und eBooks wieder an Beliebtheit zu gewinnen.
Und ganz in Sinne moderner Webentwicklung lässt sich der Effekt heute mit jQuery, CSS3 und HTML5 umsetzen.

Workshops und Seminare von kulturbanause

Visual Prototyping, Responsive Design, CSS Grid & Flexbox, Sketch, Adobe XD …

Jetzt Frühbucher-Rabatte sichern!

turn.js einsetzen

Ein großer Vorteil von turn.js ist die einfache Syntax. Nachdem das jQuery-Plugin eingebunden wurde muss lediglich noch eine ID zugewiesen und aufgerufen werden.

 

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

Das könnte dich auch interessieren

4 Kommentare

  1. Felix

    Verfasst am 20. März 2012 um 15:24 Uhr.

    Coole Sache!
    Ist zwar optisch nicht so schönen Flash, aber vielleicht wird das noch.
    Danke jedenfalls für den Hinweis

  2. Jonas

    Verfasst am 20. März 2012 um 15:53 Uhr.

    Nein, yikes, noch zu früh! Aber vielleicht schaut das in zwei Jahren schon besser aus … :-)

  3. Torsten

    Verfasst am 29. Januar 2013 um 17:41 Uhr.

    Ich habe die Demo auf turnjs.com mal kurz mit Opera 12.12 unter Windows ausprobiert, und na ja, der Blättereffekt ist nicht so wirklich elegant – das Umblättern stockt manchmal.

    Wenn ich das richtig verstehe, schreibt man den HTML-Code in die DIVs, und turn.js blendet dann die entsprechenden DIV-Container aus bzw. ein – eigentlich nichts Besonderes, aber hier eben mit Blättereffekt.

    Was ich eigentlich benötige, ist ein Programm, mit dem ich existierende PDF-Kataloge für Kunden in Blätterkataloge umwandeln kann, ohne auf externe Plattformen wie issuu.com zurückgreifen zu müssen. Und es soll, wenn es nach mir ginge, möglichst kein Flash, sondern HTML5 sein. Es gibt Programme, mit denen man so etwas erstellen kann, aber die sind leider sehr teuer, zum Beispiel „P5 HTML Publisher“ von Data Becker. Die Anschaffungskosten kann ich schlecht auf die beiden Kunden, die sich momentan für so was interessieren, umschlagen.

  4. Axel

    Verfasst am 12. März 2016 um 18:24 Uhr.

    Hallo Torsten, schau doch bitte mal auf http://www.pageflip-catalogue.com vorbei. Dort habe ich das Turn.js projekt erweitert und ich erstelle aus pdf dateien sehr schöne html5 javascript pageflip epaper ganz ohne flash. Da ich pdf.js verwende ist die darstellung jedoch wie gewohnt scharf durch schriften als kurven statt bitmaps-das kann nicht mal turn.js out of the box. ciao

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.