Plugin jQuery Windy : le défilement rapide d'une pile d'éléments
Semblable à celui d'un jeu de cartes
Le 2012-11-29 07:41:56, par vermine, Expert éminent sénior
Plugin jQuery Windy : la navigation rapide d'une pile d'éléments
semblable à celle d'un jeu de cartes.
Windy permet de faire défiler rapidement des éléments. L'effet fera s'envoler les éléments comme un jeu de cartes ou des feuilles qui, pris dans un coup de vent, s'envolent. D'où le nom du plugin. Ceci est réalisé en utilisant des transformations CSS 3D et des transitions.
Il y a plusieurs options disponibles, comme la plage de propagation des éléments, la vitesse, l'ajout de navigations personnalisées, etc.
Pour les navigateurs qui ne supportent pas les transformations CSS 3D ou les transitions, il y a une navigation simple par défaut, c'est à dire faire apparaître/disparaître les éléments sans effet.
Pour utiliser le plugin, une liste avec la classe "wi-conteneur" est attendue :
Le plugin peut alors être appelé comme ceci :
Les méthodes next() et prev() permettent d'aller à l'élément suivant ou bien de revenir à l'élément précédent. L'effet visuel est alors inversé.
Démo.
Téléchargement.
La page du projet.
semblable à celle d'un jeu de cartes.
Windy permet de faire défiler rapidement des éléments. L'effet fera s'envoler les éléments comme un jeu de cartes ou des feuilles qui, pris dans un coup de vent, s'envolent. D'où le nom du plugin. Ceci est réalisé en utilisant des transformations CSS 3D et des transitions.
Il y a plusieurs options disponibles, comme la plage de propagation des éléments, la vitesse, l'ajout de navigations personnalisées, etc.
Pour les navigateurs qui ne supportent pas les transformations CSS 3D ou les transitions, il y a une navigation simple par défaut, c'est à dire faire apparaître/disparaître les éléments sans effet.
Pour utiliser le plugin, une liste avec la classe "wi-conteneur" est attendue :
Code html : |
1 2 3 4 5 6 7 8 9 10 11 | <ul id="wi-el" class="wi-container"> <li> <img src="images/demo1/1.jpg" alt="image1"/> <h4>Coco Loko</h4> <p>Total bicycle rights in blog four loko raw denim ex, helvetica sapiente odio placeat.</p> </li> <li> <!-- ... --> </li> <li> <!-- ... --> </li> <li> <!-- ... --> </li> <!-- ... --> </ul> |
Le plugin peut alors être appelé comme ceci :
Code javascript : |
$( '#wi-el' ).windy();
Les méthodes next() et prev() permettent d'aller à l'élément suivant ou bien de revenir à l'élément précédent. L'effet visuel est alors inversé.
Golgotha
Membre expert
Bonjour,
J'aime bien le seule bémol c'est le fait de devoir tout charger dans la page, si chaque élément pèse quelques Mo... ça va être long. A tester.
J'aime bien
le 29/11/2012 à 17:06