Drücke die Tasten ◄ ► für weitere Artikel  

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: 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 , 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 und 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 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

118 Shares bis jetzt – Dankeschön!

Bewerten
VN:F [1.9.22_1171]
6 Antworten
  1. von Andreas Mitschke via facebook am 16.05.2012 (13:34Uhr)

    Ein Schritt vorran und wiedermal ohne IE Unterstützung :)

  2. von Juri Richter via facebook am 16.05.2012 (14:24Uhr)

    Schoen schaut das aus :-) .. und das wo ich gerade bei einer moeglichst einfach gehaltenen html.css seite ein noscript irgendwo reingeschrieben habe^^ (dropdown formular an zweites feld wert uebergeben per javascript, menge/preis)

  3. von Juri Richter via facebook am 16.05.2012 (14:25Uhr)

    ach so, ja, der IE.......

  4. von Felix Niklas am 16.05.2012 (15:21Uhr)

    Im Internet Explorer 10 funktioniert der Effekt!

  5. von Monika Steinberg am 16.05.2012 (15:52Uhr)

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

  6. von Mario Steuck am 09.06.2012 (10:31Uhr)

    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.

Deine Meinung

Bitte melde dich an!

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

Jetzt anmelden

Mehr zum Thema CSS
t3n-Aktion: „Schrödinger lernt HTML5, CSS3 und JavaScript“ [+Verlosung]
t3n-Aktion: „Schrödinger lernt HTML5, CSS3 und JavaScript“ [+Verlosung]

Du willst in die Webentwicklung einsteigen und HTML5, CSS3 und JavaScript lernen? Das etwas andere Fachbuch „Schrödinger lernt HTML5, CSS3 und JavaScript“ vermittelt mit Witz die Theorie und... » weiterlesen

Hover.css: 50 Hover-Effekte für deine Webseite
Hover.css: 50 Hover-Effekte für deine Webseite

Hover.css bietet dir eine Sammlung von Hover-Effekten, die du auf verschiedene Elemente deiner Website anwenden kannst. Heute stellen wir dir diese kleine, aber feine CSS-Bibliothek kurz vor. » weiterlesen

Mehr Performance für deine Website mit CSS3, dank Hardware-Acceleration
Mehr Performance für deine Website mit CSS3, dank Hardware-Acceleration

Wir zeigen euch, wie ihr die Hardware-Acceleration mit CSS3 aktivieren könnt um eure Web-Projekte, zum Beispiel auf Smartphones, schneller laufen zu lassen. » weiterlesen

Kennst Du schon unser t3n Magazin?

t3n 35 jetzt kostenfrei probelesen! Alle Inhalte des t3n Magazins Diesen Hinweis verbergen