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.

Newsletter Newsletter

Abonniere unseren Newsletter und erhalte einen exklusiven Artikel aus dem aktuellen t3n Magazin.

Jetzt lesen: t3n Newsletter Nr. 544

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
Typografie im Responsive Webdesign – Teil 2: So erstellt ihr Responsive Headlines
Typografie im Responsive Webdesign – Teil 2: So erstellt ihr Responsive Headlines

Im ersten Teil dieser Artikelserie über Typografie im Responsive Webdesign ging es um die Auswahl und Einbindung der richtigen Schrift. Nachdem ich darin die wichtigsten Punkte von reaktionsfähiger … » weiterlesen

Typografie im Responsive Webdesign – Teil 3: So erstellt ihr responsiven Body-Text
Typografie im Responsive Webdesign – Teil 3: So erstellt ihr responsiven Body-Text

Im vorigen Teil dieser Artikelserie über Typografie im Responsive Webdesign haben wir verschiedene Möglichkeiten erkundet, flüssige und reaktionsfähige Überschriften für Webseiten umzusetzen. » weiterlesen

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

Alle Hefte Jetzt abonnieren – für nur 35 €

Kennst Du schon unser t3n Magazin?

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