Das könnte dich auch interessieren

Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Entwicklung

Paperfold CSS: Kommentare mit Akkordeon-Effekt

    Paperfold CSS: Kommentare mit Akkordeon-Effekt

Paperfold CSS ist ein schicker und kreativer 3D-Texteffekt, der mittels CSS3 und JavaScript eine Kommentarliste fächerartig zusammen und wieder auseinander klappt. Im Mozilla Developer Network steht eine Demo samt Quellcode bereit, die wir euch kurz vorstellen.

Paperfold CSS: Eine Kommentarliste wie Papier falten

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.

Paperfold CSS: Die Kommentarliste im 3D-Raum gedreht

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.

Paperfold CSS: Demo mit aktivierten Hilfseinstellungen

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:

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

Finde einen Job, den du liebst zum Thema Webdesign, Webentwickler

3 Reaktionen
Mario Steuck
Mario Steuck

Das ist echt ein toller Effekt. Nur immer blöd das die älteren IE's nicht mitspielen. wann bekommen die das mal hin und bringen ein vernünftigen Browser auf den Markt? Naja.. aber der großteil an User verwendet sowieso Firefox, Google Chrome.

Antworten

Monika Steinberg

@Felix Niklas danke für den Hinweis - ist ergänzt.

Antworten

Felix Niklas
Felix Niklas

Im Internet Explorer 10 funktioniert der Effekt!

Antworten

Melde dich mit deinem t3n-Account an oder fülle die unteren Felder aus.

Abbrechen