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

Newsletter

Bleibe immer up-to-date. Sichere dir deinen Wissensvorsprung!

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
5 praktische CSS-Libs: Wenn JavaScript pause machen darf
5 praktische CSS-Libs: Wenn JavaScript pause machen darf

CSS ist ein sehr mächtiges Werkzeug geworden und verdrängt in vielen Bereichen JavaScript immer weiter. Wofür wir früher jQuery benutzen mussten, kann heute schon mit reinem CSS gelöst … » weiterlesen

Tooltips ohne JavaScript: Das kann Hint.css 2.0
Tooltips ohne JavaScript: Das kann Hint.css 2.0

Mit Hint.css baut ihr ganz ohne Javascript schicke Tooltips in eure Web-Apps ein. Wir werfen einen kurzen Blick auf Version 2.0 der Library. » weiterlesen

Jetzt „Apps mit HTML5, CSS3 und JavaScript“ von Rheinwerk gratis sichern! [t3n-Aktion]
Jetzt „Apps mit HTML5, CSS3 und JavaScript“ von Rheinwerk gratis sichern! [t3n-Aktion]

Wer mobile Anwendungen entwickeln möchte, findet in „Apps mit HTML5, CSS3 und JavaScript“ von Rheinwerk eine hilfreiche Lektüre für den Start. Als Neuabonnent kannst du dich über eines der … » weiterlesen

Alle Hefte Jetzt abonnieren – für nur 35 €

Kennst Du schon unser t3n Magazin?