Vous êtes nouveau sur Developpez.com ? Créez votre compte ou connectez-vous afin de pouvoir participer !

Vous devez avoir un compte Developpez.com et être connecté pour pouvoir participer aux discussions.

Vous n'avez pas encore de compte Developpez.com ? Créez-en un en quelques instants, c'est entièrement gratuit !

Si vous disposez déjà d'un compte et qu'il est bien activé, connectez-vous à l'aide du formulaire ci-dessous.

Identifiez-vous
Identifiant
Mot de passe
Mot de passe oublié ?
Créer un compte

L'inscription est gratuite et ne vous prendra que quelques instants !

Je m'inscris !

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

Le , par vermine

32PARTAGES

3  0 
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.

Une erreur dans cette actualité ? Signalez-le nous !

Avatar de marcbuils
Membre régulier https://www.developpez.com
Le 30/10/2012 à 15:49
L'effet est vraiment très sympa oui
0  0