201210Dez

BookBlock: HTML-Inhalte umblättern mit CSS3/jQuery

Der digitale "Umblättern"-Effekt, wie man ihn von diversen eBooks und Flash-Anwendungen kennt, ist dank CSS3 schon seit einiger Zeit mit HTML und CSS möglich. Das jQuery-Plugin Viewbook oder die CSS3-Demo von Román Cortés zeigen Variationen des Effekts.
Bei Codrops findet sich aktuell auch ein Artikel, wie sich der Effekt in ein eigenes jQuery-Plugin packen lässt. Das Plugin BookBlock wird in dem Artikel umschrieben und eine Demo findet sich auf dieser Seite.

Codrops - BookBlock: A Content Flip Plugin

BookBlock macht ebenfalls Gebrauch von CSS3 und "transform()" bzw. "translate()". Per Klick wird ein beliebiges Inhaltselement also über die Rotation der Y-Achse transformiert, wodurch optisch der Effekt des Umblätterns entsteht. Unter Google Chrome oder Safari ist aktuell eine bessere Darstellung als in anderen Browsern möglich, da Antialiasing in der WebKit-Engine integriert ist.