PFold : un plugin jQuery permettant d'obtenir un effet de dépliage de papier
Le 2012-10-25 11:37:59, par vermine, Expert éminent sénior
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 :
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 :
Plusieurs options sont disponibles comme la vitesse, le type de transition, le délai entre chaque étape, etc.
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 : |
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 : |
$('#uc-container').pfold();
Plusieurs options sont disponibles comme la vitesse, le type de transition, le délai entre chaque étape, etc.
marcbuils
Membre régulier
L'effet est vraiment très sympa oui
le 30/10/2012 à 15:49