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

Le , par vermine, Responsable JavaScript & AJAX
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
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
$('#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.


Vous avez aimé cette actualité ? Alors partagez-la avec vos amis en cliquant sur les boutons ci-dessous :


 Poster une réponse

Avatar de marcbuils marcbuils - Membre régulier https://www.developpez.com
le 30/10/2012 à 15:49
L'effet est vraiment très sympa oui
Offres d'emploi IT
Ingénieur analyste programmeur (H/F)
Safran - Auvergne - Montluçon (03100)
Ingénieur développement fpga (traitement vidéo) H/F
Safran - Ile de France - 100 rue de Paris 91300 MASSY
Expert décisionnel business intelligence H/F
Safran - Ile de France - Évry (91090)

Voir plus d'offres Voir la carte des offres IT
Responsable bénévole de la rubrique JavaScript : Xavier Lecomte -