t3n News Entwicklung

Paperfold CSS: Kommentare mit Akkordeon-Effekt

Paperfold CSS: Kommentare mit Akkordeon-Effekt

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

Paperfold CSS: Kommentare mit Akkordeon-Effekt
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

Vorheriger Artikel Zurück zur Startseite Nächster Artikel
3 Antworten
  1. von Felix Niklas am 16.05.2012 (15:21 Uhr)

    Im Internet Explorer 10 funktioniert der Effekt!

    Antworten Teilen
  2. von Monika Steinberg am 16.05.2012 (15:52 Uhr)

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

    Antworten Teilen
  3. von Mario Steuck am 09.06.2012 (10:31 Uhr)

    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 Teilen
Deine Meinung

Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Mehr zum Thema CSS
Voxel.css: Das kann die quelloffene 3D-Library für das Web
Voxel.css: Das kann die quelloffene 3D-Library für das Web

Voxel.css ist eine leichtgewichtige 3D-Library auf Basis von CSS und JavaScript. Wir verraten euch, was es damit auf sich hat. » weiterlesen

Webbasierter HTML-Editor für Anfänger: Das kann Mozillas Thimble
Webbasierter HTML-Editor für Anfänger: Das kann Mozillas Thimble

Mozilla hat Thimble, ihren webbasierten HTML-Editor für Anfänger, deutlich überarbeitet. Wir zeigen euch, was das Tool alles kann. » weiterlesen

Aus für Firefox-OS-Smartphones
Aus für Firefox-OS-Smartphones

Mozilla zieht einen Schlussstrich unter die Entwicklung seines eigenen Smartphone-Betriebssystems Firefox OS. Das Unternehmen wird die Entwicklung des OS zwar nicht komplett einstellen, man wolle es … » weiterlesen

Alle Hefte Jetzt abonnieren – für nur 35 €

Kennst Du schon unser t3n Magazin?