fractionslider

FractionSlider, plugin d’animation CSS3

fractionSlider est un bon petit plugin qui permet de faire des animations en couplant animation CSS3 et jQuery.

Tous les élément d’un slide sont intégrés dans un div et vous pouvez leur assigner des data-attribute pour définir :

  • leur position
  • leur type de transition
  • leur timing etc…

Exemple de container de slide

<div class="slider"><!-- le container principal -->
<div class="slide"><!-- tous les éléments du premier slide --></div>
<div class="slide"><!-- tous les éléments du deuxième slide --></div>
<!-- and so on -->
<div class="fs_loader"><!-- montre un preloader en .gif --></div>
</div>

Exemple d’objet animé

ici, une image qui arrive par la droite :

<img alt="" src="chemin/vers/image" data-position="100,100" data-in="scrollLeft" />

Demo et doc

une doc est disponible ici et une demo là.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>