Drücke die Tasten ◄ ► für weitere 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 Plugin 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 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.

90 Shares bis jetzt – Dankeschön!

Bewerten
VN:F [1.9.22_1171]
3 Antworten
  1. von Jakiku am 27.12.2012 (21:55Uhr)

    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?

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

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

    Cheers
    Mat

Deine Meinung

Bitte melde dich an!

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

Jetzt anmelden

Mehr zum Thema CSS3
„One Page Scroll“ – Apples Webdesign für jedermann
„One Page Scroll“ – Apples Webdesign für jedermann

Apple überrascht eigentlich immer mit ansprechenden UI-Designs bei der Produktpräsentation. Dieser Artikel zeigt euch, wie ihr mit „One Page Scroll“ eine Landingpage ähnlich der für das... » weiterlesen

Die Mutter aller Dropdown-Menüs: Warum Amazons Menü so schnell ist
Die Mutter aller Dropdown-Menüs: Warum Amazons Menü so schnell ist

Rasend schnell, präzise und trotz schierer Informationsmengen übersichtlich: Das ist das Dropdown-Menü der Amazon-Seiten. Heute zeigen wir euch, wie ihr ein ähnliches Navigationsmenü selbst... » weiterlesen

Transit: CSS-Transitions und -Transformationen für jQuery
Transit: CSS-Transitions und -Transformationen für jQuery

Mit Transit sollen deutlich bessere Ergebnisse als mit der normalen Animate-Funktion von jQuery möglich sein. Die Bibliothek unterstützt 2D- und 3D-Transformationen, bringt einige Easing-Methoden... » weiterlesen

Kennst Du schon unser t3n Magazin?

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