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

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();

} );

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.