Vorheriger Artikel Nächster Artikel

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:21Uhr)

    Im Internet Explorer 10 funktioniert der Effekt!

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

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

    Antworten Teilen
  3. 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.

    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
Magic kurz vorgestellt: Animate.css für Anwendungsentwickler
Magic kurz vorgestellt: Animate.css für Anwendungsentwickler

Wir haben bereits über die CSS-Bibliothek animate.css berichtet. Wer noch mehr und vor allem andere Animations-Effekte benötigt, der sollte sich die Beta von Magic ansehen. » weiterlesen

Coden in Firefox: Mozilla stellt Entwicklungsumgebung WebIDE vor
Coden in Firefox: Mozilla stellt Entwicklungsumgebung WebIDE vor

Firefox enthält jetzt im Nightly Build eine eigene Entwicklungsumgebung namens WebIDE. Damit können Entwickler direkt im Mozilla-Browser Web-Anwendungen entwickeln, bearbeiten und testen. » weiterlesen

Ein CSS3-Generator zum Verlieben: Hier kommt Bounce.js
Ein CSS3-Generator zum Verlieben: Hier kommt Bounce.js

Wir lieben CSS3-Animationen. Allerdings können diese ganz schnell unübersichtlich in der Programmierung werden. Der Service Bouncejs.com bietet euch ein Interface, das ihr lieben werdet. » weiterlesen

Kennst Du schon unser t3n Magazin?

t3n-Newsletter t3n-Newsletter
Top-Themen der Woche für Web-Pioniere
Jetzt kostenlos
anmelden
Diesen Hinweis verbergen