Webdesign

Paperfold CSS: HTML5 kreativ eingesetzt

26. April 2012
von

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.

7 Kommentare zu „Paperfold CSS: HTML5 kreativ eingesetzt
  1. Felix Niklas am 26. April 2012 um 23:34

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

    • Swetlana Senkevitch am 27. April 2012 um 10:18

      Danke schön! :-)

  2. Michi am 29. April 2012 um 18:04

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

    • Swetlana Senkevitch am 29. April 2012 um 22:43

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

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

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

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

Ein Kommentar? Schön!

Wir freuen uns immer über Leser, die durch nützliche und konstruktive Beiträge zum Thema eine Diskussion anstoßen oder den Artikel mit weiteren Informationen anreichern. Alle Kommentare werden in diesem Sinne moderiert. Zum Kommentar-Fairplay gehört für uns auch der Einsatz von rel="nofollow". Bitte verwenden Sie zudem als Namen weder eine Domain noch ein spamverdächtiges Wort. Vielen Dank!