Paperfold CSS: HTML5 kreativ eingesetzt

Grundsätzlich kann man schon zufrieden sein, wenn die eigene Website einwandfrei strukturiert ist und gut funktioniert. Aber schöne, kreative Elemente können den Gesamteindruck stark verbessern. An dieser Stelle macht der Berliner Entwickler Felix Niklas einen Vorschlag. Im Mozilla Developer Network stellte er eine Demo namens Paperfold CSS bereit. Paperfold CSS ist eine neue interessante Anwendungsmöglichkeit, die in der Demo eine Kommentarliste zusammenfaltet.


Interessanter optischer Effekt: Kommentare im Harmonika-Look

Paperfold CSS: Wie funktioniert es?

Für seine Demo-Seite verwendete Felix Niklas HTML5, insbesondere Javascript und CSS3. Die Funktionsweise der Paperfold-Demo ist eigentlich ganz einfach. Kommentare werden im Markup als Ansammlung von <section>-Elementen dargestellt. Die Höhe des jeweiligen Kommentars wird anhand seiner Darstellung im DOM mit Javascript ausgelesen. Ebenfalls wird die Anzahl der Kommentare ermittelt. Die Trennlinien zwischen Kommentaren stellen optisch Falten dar. Die durch diese Falten unterteilten Kommentare werden nun mittels CSS und Javascript manipuliert. Es entsteht der optische Eindruck eines gefalzten Flyers durch eine Drehung der <section>-Elemente mit CSS-Transforms und JavaScript-Animation.

Technisch gesehen spaltet Paperfold Tochterelemente von einem DOM-Baum und legt diese im Cache ab. Die Tochterelemente werden dann in vorher festgelegten Raumkoordinaten im 3D-Raum positioniert. Im nächsten Schritt werden die im Cache abgelegten Tochterelementen „zusammengeklebt“ und samt den Falten nun wieder im DOM abgelegt. Das Ein- und Ausklappen wird über Javascript mit Hilfe von CSS-Klassen visible und hidden realisiert.


Paperfold CSS hinter den Kulissen

Um den Effekt im dreidimensionalen Raum sehen und so besser verstehen zu können, sollte das „Show Helper“ benannte Häckchen auf der Demoseite aktiviert werden.

Wird Paperfold CSS von allen Browsern unterstützt?

In den aktuellen Versionen von Chrome und Safari funktioniert Paperfold CSS einwandfrei. Der Internet Explorer kann den Effekt gar nicht darstellen, auch in der aktuellen Version 9 nicht. In älteren Firefox-Versionen wird der Effekt nicht sauber ausgeführt: In den Falten sind Lücken vorhanden. Im Firefox 12 passt die Darstellung nahezu einwandfrei. Im Hinblick auf die Performance bestehen nach eigenen Angaben des Entwicklers noch deutliche Optimierungspotenziale. Dennoch ist die Technik interessant und zeigt, was man mit CSS und Javascript kreativ erreichen kann.

Der Quellcode von Paperfold CSS ist frei verfügbar und lässt sich als .zip-Datei herunterladen. Der eigenen Kreativität in der Abwandlung des Beispiels sind damit keine Grenzen gesetzt.

Links zum Beitrag:

(dpe)

Neben dem Chemiestudium interessiert sich Swetlana Senkevitch für sehr viele Dinge dieser Welt. Kunst, Malerei, Psychologie, Naturwissenschaften, Schachspiel, Sprachen und Photographie sind nur einige Beispiele ihrer Interessen und Hobbies. Sie hat eine Leidenschaft fürs Schreiben und Design gefunden und beschäftigt sich nun mit Webdesign.

Sortiert nach:   neueste | älteste | beste Bewertung
Felix Niklas
Gast

Schön beschrieben – genau so läuft’s! Hab mir sagen lassen, dass der Effekt im kommenden IE 10 funktioniert.

Michi
Gast

Suuuper Beitrag, schön erläutert & mich heiß auf die Umsetzung gemacht, sieht ja doch sehr schick aus. :)

trackback

[…] einiger Zeit stellten wir hier bei Dr. Web Paperfold CSS vor. Die experimentelle Demo aus dem Mozilla Developer Network faltete zu Beispielzwecken einen […]

trackback

[…] Paperfold CSS: HTML5 kreativ eingesetzt – Dr. Web Magazin […]

trackback

[…] Paperfold CSS: HTML5 kreativ eingesetzt – Dr. Web Magazin […]

wpDiscuz