Discussion :

[vermine]

PFold : un plugin jQuery permettant d'obtenir un effet de dépliage de papier

Ce plugin jQuery vous permet de déplier des éléments pour révéler davantage de contenu à la manière d'un morceau de papier qui a été plié. Un élément peut être déplié en 3D afin de révéler un autre contenu. La direction du dépliage et le nombres d'étapes sont paramétrables. Chaque étape va doubler la taille de l'élément.

Le concept est sympa mais notons toutefois que le projet est expérimental. D'ailleurs, pour les navigateurs qui ne supportent pas les transformations CSS 3D ou les transitions, le plus grand contenu apparaît alors sans étape.

Pour utiliser le plugin, définissez la structure suivante :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<div id="uc-container" class="uc-container">
    <div class="uc-initial-content">
        <!-- contenu initial -->
    </div>
    <div class="uc-final-content">
        <!-- cotenu final -->
    </div>
</div>

La taille du contenu final dépendra de la taille du contenu initial (définie dans le CSS) mais aussi des directions du pliage et du nombre d'étapes. Par exemple, un élément initial de 200px de largeur et 200px de hauteur avec une direction de pliage vers le bas et la gauche en deux étapes créera une zone finale de 400px en largeur et en hauteur.

Vous pouver appeler le plugin de cette manière :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

$('#uc-container').pfold();

Plusieurs options sont disponibles comme la vitesse, le type de transition, le délai entre chaque étape, etc.

Démo.
Téléchargement.
La page du projet.

[marcbuils]

L'effet est vraiment très sympa oui