Entwicklung & Design

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 Plugin zu bieten hat.

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.

Zur Startseite
Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

3 Kommentare
Jakiku

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
Mat

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

Cheers
Mat

Antworten
Abbrechen

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.

Bitte schalte deinen Adblocker für t3n.de aus!

Hey du! Schön, dass du hier bist. 😊

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team bestehend aus 65 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Danke für deine Unterstützung.

Digitales High Five,
Stephan Dörner (Chefredakteur t3n.de) & das gesamte t3n-Team

Anleitung zur Deaktivierung