Paperfold CSS: Kommentare mit Akkordeon-Effekt

DIVs wie Papier falten mit Paperfold CSS

Wie Felix Niklas, der Entwickler von Paperfold CSS, zu seiner Paperfold CSS Demo im Mozilla Developer Network schreibt, faltet er mit seinem Texteffekt <div> Tags wie Papier zusammen, um eine visuelle Möglichkeit für das Ausblenden von Kommentaren in Listen zu erreichen. Dafür hat Niklas JavaScript und CSS3 verwendet. Paperfold CSS arbeitet dabei mit DOM-Elementen, schneidet sie in Stücke und stellt sie dann wie gefaltetes Papier mit 3D-Effekt da.

In HTML entspricht jeder Kommentar einem eigenen <section> Element. Über eine Drehung dieser Elemente im 3D-Raum mittels CSS-Transforms und JavaScript kommt es zu dem gewünschten Texteffekt, der eine Kommentarliste wie ein Akkordeon ein- und ausklappen lässt. Auf der Demoseite zu Paperfold CSS kann man den schicken 3D-Texteffekt mit verschiedenen Einstellungen wie Höhenlimit für die einzelnen Kommentare, 3D-Perspektive oder Hilfsanzeige testen. Auch die gesamte Kommentarliste lässt sich per Drag-And-Drop wie ein gefaltetes Blatt Papier im 3D-Raum in jede Richtung drehen.

Außer im Internet Explorer bis Version 9 funktioniert der Paperfold CSS Effekt in allen aktuellen großen Browsern wie Chrome, Safari und Firefox. Wie Niklas selbst anmerkt, kommt es jedoch hier und da noch zu Performance-Problemen. Insgesamt ist Paperfold CSS aber ein schönes Beispiel dafür, was an kreativen Lösungen alles möglich ist mit CSS3 und JavaScript.

Der Quellcode von Paperfold CSS steht über das Mozilla Developer Network als zip-Archiv frei zum Download zur Verfügung.

Weiterführende Links:

• Paperfold CSS – Mozilla Developer Network
• Paperfold CSS Demo – Mozilla Developer Network

Bildnachweis für die Newsübersicht: aka rhapsodicirony / flickr.com, Lizenz: CC-BY