Vorheriger Artikel Nächster Artikel

pFold: Papier-Auffalt-Effekt mit CSS3 und jQuery

Mit pFold können eure Webseiten mit einem Coolen 3D-Auffalt-Effekt auf CSS3-Basis versehen werden. Wir zeigen euch, was das zu bieten hat.

pFold: Papier-Auffalt-Effekt mit CSS3 und jQuery

pFold ist ein experimentelles jQuery-Plugin, mit dem ein 3D-Auffallt-Effekt erzielt werden kann, der ein sich auffaltendes Blatt Papier simuliert. Es ist möglich die Auffalt-Richtung, -Geschwindigkeit und die Anzahl der Falt-Schritte festzulegen. Für Browser, die keine CSS-3D-Transforms oder Transitions unterstützen, ist ein simples Fallback eingebaut.

pFold im Einsatz

Screenshot von pFold
pFold zusammengefaltet

Für die Nutzung des Plugins wird folgende Codestruktur erwartet:

<div id="uc-container" class="uc-container">

<div class="uc-initial-content">

<!-- Inhalt vor dem Auffalten -->

</div>

<div class="uc-final-content">

<!-- Inhalt nach dem Auffalten -->

</div>

</div>

Die Endgröße des Containers hängt von der Ausgangsgröße des Elements und der Anzahl der Entfaltungs-Schritte ab. So wird zum Beispiel aus einem 200px*200px-Element bei zwei Falt-Schritten ein 400px*400px großes Element. pFold unterstützt hierbei nicht nur das Auffalten, sondern auch das Zusammenfalten.

Beim Aufruf können weitere Parameter an das Script übergeben werden. Es ist möglich die Geschwindigkeit und das Easing für das Auffalten festzulegen. Auch können jeweils die Faltrichtungen für jedes einzelne Entfalten definiert werden. Außerdem besteht die Möglichkeit, die Faltgeschwindigkeit sowie Pausen zwischen einzelnen Faltvorgängen festzulegen. Zusätzlich dazu kann der Final-Content zentriert an der Position des Initial-Contents ausgerichtet werden.

Mit dem folgenden Code wird, nach einem Klick auf ein Span-Element, der Container dreimal (folds) entfaltet: Einmal nach links, unten und rechts (folddirection). Jeder Entfaltvorgang dauert 500ms (speed). Der entfaltete Content wird beim Falten in die Mitte des gefalteten Content's positioniert (centered). Nach einem Klick auf ein weiteres Span-Element, wird der Vorgang wieder rückgängig gemacht.

var $container = $('#uc-container' ), pfold = $( '#uc-container' ).pfold({

easing : 'ease-in-out', folds : 3, centered: "true", speed: 500, folddirection : ['left','bottom','right']

});

$container.find( 'span.clickme' ).on( 'click', function() {

pfold.unfold();

} ).end().find( 'span.close' ).on( 'click', function() {

pfold.fold();

} );

Screenshot von pFold
pFold auseinandergefaltet

 

pFold - nette Effekte für aktuelle Browser

pFold bietet einen coolen Auffalt-Effekte, der beispielsweise bei Portfolio-Seiten durchaus Verwendung finden könnte. Unter aktuellen Browsern läuft das Plugin flüssig und ohne größere Probleme. Ein Plugin, das man durchaus im Blick behalten sollte. Wer selbst einen Blick auf pFold riskieren möchte, kann dies auf der Projektseite von pFold tun.

NEU: Lass dir diesen Artikel vorlesen
Ein Service von t3n, in Kooperation mit Narando.
Vorheriger Artikel Zurück zur Startseite Nächster Artikel
2 Antworten
  1. von Jakiku am 27.12.2012 (21:55 Uhr)

    Sehr schöner Effekt. Überlege ihn für uns zu benutzen. Mich würde interessieren, welche Browser den Effekt unterstützen. Wie sieht es gerade mit mobilen Browsern aus?

    Antworten Teilen
  2. von Mat am 28.12.2012 (12:30 Uhr)

    Sieht gut aus!
    Das könnte ich mir super für Notizen oder Neuigkeiten vorstellen. Werde es garantiert ausprobieren!

    Cheers
    Mat

    Antworten Teilen
Deine Meinung

Bitte melde dich an!

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

Jetzt anmelden

Mehr zum Thema CSS3
Kinderleicht zu CSS3-Animationen mit diesem Stylesheet
Kinderleicht zu CSS3-Animationen mit diesem Stylesheet

Mit dem CSS3 Animations Cheat Sheet, gibt es ein praktisches Stylesheet, mit dessen Hilfe ihr ohne großen Aufwand Seitenelemente animieren könnt. » weiterlesen

Für euer CMS oder eure Web-App: Mit dem jQuery-Plugin ContentBuilderJS werden Inhalte einfach zusammengeklickt
Für euer CMS oder eure Web-App: Mit dem jQuery-Plugin ContentBuilderJS werden Inhalte einfach zusammengeklickt

ContentBuilderJS ist ein jQuery-Plugin, mit dem sich Webseiten aus vorgefertigten Blöcken einfach zusammenklicken lassen. Die Inhalte der jeweiligen Blöcke lassen sich anschließend direkt Inline … » weiterlesen

Dropdown-Menüs: 20 Demos von simpel bis schick – inklusive Download und Tutorials
Dropdown-Menüs: 20 Demos von simpel bis schick – inklusive Download und Tutorials

HTML5 und CSS3 bilden die Standards, die Webseiten- und Mobile-Web-Entwicklung aktuell prägen. Es gibt unzählige Variationen von Dropdown-Menüs und Tutorials auf Basis dieser Technologien – vor … » 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