jQuery Transit : un plugin jQuery pour gerer les transformations et animations CSS3

jQuery Transit : derrière ce nom qui peut être douteux se cache un plugin jQuery qui peut s’avérer très utile. En effet, il permet de gérer facilement les transformations et animations CSS3 (par exemple : transform : perspective(600);).

Sur le site du plugin, on retrouve des exemples pour toutes les transformations / animations disponibles :

  • x(px)
  • y(px)
  • translate(x, y)
  • rotate(deg)
  • rotateX(deg)
  • rotateY(deg)
  • rotate3d(x, y, z, deg)
  • scale(x, [y])
  • perspective(px)
  • skewX(deg) : déformation d’un bloc rectangulaire en parallélogramme
  • skewY(deg) : déformation d’un bloc rectangulaire en parallélogramme

On peut également jouer sur la durée de l’animation, ajouter de l’easing (pour une animation non-linéaire), utiliser des valeurs relatives (par exemple : rotate : ‘+=30deg’ ) ou encore jouer avec des délais.

À noter également que la méthode « transition() » présente dans le plugin accepte d’autres propriétés que celles définies dans le plugin (par exemple on peut coupler une des animations citées ci-dessus avec opacity), et inversement, on peut utiliser les déformation avec la méthode css() de jQuery (par exemple : $(‘#truc’).css({ rotate: ‘-10deg’ }); ).

Ce plugin est aussi à mettre de côté pour de futurs projets qui nécessiterait beaucoup d’animations (par exemple un portfolio ou un site évènementiel !).

Ce contenu a été publié dans HTML / CSS, JQuery, avec comme mot(s)-clé(s) , , . Vous pouvez le mettre en favoris avec ce permalien.

2 reponses a jQuery Transit : un plugin jQuery pour gérer les transformations et animations CSS3

  1. Xavier dit :

    Bonjour,
    je ne vois l’interêt, puisque les animations jQuery les faits très bien, bien sûr ce n’est pas du flash, des vrais animations. Mais css3 n’apporte pas grand chose à l’existant, à part la mode ?

  2. J’aime bien jquery, même si j’avoue que c’est un peu dure pour le débutant.
    Merci

Laisser un commentaire

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