jQuery Transit, plugin pour utiliser facilement les transitions CSS3

jQuery Transit est un plugin jQuery qui permet d’appliquer facilement des transformations et transitions CSS3 sur vos éléments HTML. Pas besoin de créer une feuille de style ; tout est géré via jQuery pour un résultat identique.

Transformations et transitions CSS3

Pourquoi utiliser un plugin jQuery pour mettre en place des transformations / transitions CSS ? Parce que la syntaxe est plus simple, plus besoin d’écrire autant de lignes de code qu’il y a de préfixes CSS, et que le contrôle est total : paramètres, fonctions de callback, et combinaison avec toutes les fonctions natives de jQuery.

Voici la liste des transformations réalisables :

  • translation : x (px), y (px) et translate (x, y)
  • rotation : rotate (deg), rotateX (deg), rotateY (deg) et rotate3d (deg)
  • zoom : scale (x, [y])
  • perspective : perspective (px)
  • inclinaison : skewX (deg), skewY (deg)

Utilisation de jQuery Transit

On commence par un inclure le framework jQuery, version 1.4 minimum, et le plugin.

<script src='jquery.js'></script>
<script src='jquery.transit.js'></script>

On définit une classe ou un id CSS sur notre élément HTML.

<div id="box"></div>

La méthode css() pour les transformations
Pour générer une transformation CSS3, jQuery Transit utilise la méthode css(). L’auteur du plugin a eu la bonne idée de « surcharger » cette fonction native de jQuery pour y ajouter les propriétés CSS3. Elle fonctionne donc exactement pareil.

$("#box").css({ x: '30px' });               // Move right
$("#box").css({ y: '60px' });               // Move down
$("#box").css({ translate: [60,30] });      // Move right and down
$("#box").css({ rotate: '30deg' });         // Rotate clockwise
$("#box").css({ scale: 2 });                // Scale up 2x (200%)
$("#box").css({ scale: [2, 1.5] });         // Scale horiz and vertical
$("#box").css({ skewX: '30deg' });          // Skew horizontally
$("#box").css({ skewY: '30deg' });          // Skew vertical

Chaque ligne de code ci-dessus génère une transformation CSS différente. Libre à vous de les placer dans un événement jQuery (click, hover, etc). A noter également que la méthode native animate() sera incapable d’animer les propriétés CSS3 utilisées. C’est justement le rôle que remplit parfaitement jQuery Transit avec sa méthode transition() qui gère les animations.

La méthode transition() pour les animations
Pour générer une transition CSS3, il faut utiliser la méthode transition(). Elle s’utilise comme la méthode animate(), avec des paramètres de durée, de type easing, des fonctions de callback, etc.

$("#box").transition({ opacity: 0.1, scale: 0.3 });
$("#box").transition({ opacity: 0.1, scale: 0.3 }, 500);                   // duration
$("#box").transition({ opacity: 0.1, scale: 0.3 }, 'fast');                // easing
$("#box").transition({ opacity: 0.1, scale: 0.3 }, 500, 'in');             // duration+easing
$("#box").transition({ opacity: 0.1, scale: 0.3 }, function() {..});       // callback

Comme pour la transformation, vous êtes libre de déclencher la transition avec jQuery. Par exemple, pour qu’un élément HTML fasse une rotation animée de 160° au rollover et qu’ensuite il revienne à sa position initiale, on peut utiliser le bout de code suivant :

$(document).ready(function() {
   $("#box").mouseover(function() {
      $(this).transition({ rotate: '160deg' }); 
   }).mouseout(function(){
      $(this).transition({ rotate: '0deg' });
   });
});

jQuery Transit est donc très pratique pour mettre en place des opérations CSS3 rapidement, tout en héritant des avantages du framework JavaScript. Niveau support navigateur, cela ne change rien, ce sont les logiciels les plus récents du marché qui sont compatibles.

Requis : jQuery 1.4+
Compatibilité : IE 10+, Firefox 4+, Safari 5+, Chrome 10+, Opera 11+, Mobile Safari
Démonstration : http://ricostacruz.com/jquery.transit/
Licence : MIT License

Commentaires

  • Gmajoulet

    Pas de fallback sur des animate sur les vieux navigateurs ? Dommage :(

  • Weclominh

    Ca l’air très puissant. Ca peut être utile pour donner quelques effets intéressants. Comme sur un euh….un portfolio par exemple.

  • Complétement d’accord avec toi

  • typiac

    Je suis en train de le tester et quand on utilise avec des images, il y a pas mal de problèmes d’aliasing. Attention, si vous utilisez plusieurs effets, il faut désactiver le « queue » car sinon, chaque transition doit se terminer avant que la suivante ne débute.

    Autant sur le principe, je le trouve bien, autant il créé pas mal de ralentissement et j’ai bien du mal a créer des effets fluides…

  • jeffdev

    ma problématique est de permettre à l’utilisateur de déplacer une image (et éventuellement de la redimensionner) sur une page (smartphone), est-ce que vous pensez que ceplugin convient ? perso je n’y arrive pas … si oui, avez-vous un bout de code ? merci !!!!

    • Oui, ce plugin convient pour déplacer une image. Tu peux utiliser le dernier bout de code de l’article qui permet de faire une rotation au rollover (ce qui correspond à un clic sur smartphone, ou alors tu changes directement l’événement en clic) et changer la transformation « rotate » en « translate » avec les valeurs que tu souhaites.

      • jeffdev

        ça marche bien si je fixe des valeurs de déplacement ou de rotation, c’est l’interaction avec l’utilisateur qui me pose problème, dans ma webApp c’est lui qui doit déplacer l’image ou il le souhaite sur la page ..

        • Dans ce cas jQuery Transit ne te sera d’aucune utilité. Regarde plutôt du côté de http://pep.briangonzalez.org/ qui semble plus répondre à ton besoin, mais je ne l’ai jamais utilisé.

          • jeffdev

            merci !!!!

            Le 2 janv. 2013 à 18:40, Disqus a écrit :