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
Felix Niklas
4 Jahre 2 Monate her

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

Michi
Gast
4 Jahre 2 Monate her

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

Mit der Nutzung unseres Angebots erklärst du dich damit einverstanden, dass wir Cookies verwenden. Weitere Informationen

Wir verwenden Cookies, um Inhalte und Anzeigen zu personalisieren, Funktionen für soziale Medien anzubieten und die Zugriffe auf unsere Website zu analysieren. Dadurch geben wir nicht personenbezogene Informationen zur Nutzung unserer Website an unsere Partner für soziale Medien, Werbung und Analysen weiter. Nähere Informationen findest du in unserer Datenschutzerklärung. Durch die Weiternutzung unserer Website (oder das ausdrückliche Klicken auf "Einverstanden") gehen wir davon aus, dass du mit der Verwendung von Cookies einverstanden bist.

Schließen