Webdesign

Paperfold CSS: HTML5 kreativ eingesetzt

26. April 2012

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.

Kommentar hinzufügen

Diese E-Mail ist schon registriert. Bitte benutzen Sie die Login-Form oder geben Sie andere ein.

Sie haben nicht korrektes Login und Passwort eingegeben

Entschuldigen, aber Sie müssen zugriffen, um das Kommentar zu schreiben.

4 Kommentars

chronologisch
nach der Bewertung zuerst neue chronologisch
1

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

3

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

Autor4

Danke! :-) Freut mich, wenn es dir gefällt. Paperfold ist echt eine coole Sache;-)