jRumble, faites vibrer vos éléments avec jQuery

4 avril 2011

jRumble est un plugin jQuery qui permet de faire vibrer n’importe quel élément HTML au survol de la souris. L’objectif est de diriger l’attention de l’internaute sur cet élément de façon plutôt originale. Le contrôle de la vibration est total : on peut faire varier l’élément sur les axes X et Y, modifier l’angle de rotation, ainsi que la vitesse d’animation.

Comment l’utiliser ?

Pour l’utiliser, on utilise la fonction rumble() sur l’élément que l’on souhaite faire vibrer.

	$('#my-rumble-div').jrumble();

Les options

Quelques options permettent de personnaliser la vibration :

  • rangeX : le décalage sur l’axe des abscisses
  • rangeY : le décalage sur l’axe des ordonnées
  • rangeRot : l’angle de rotation (en degrés)
  • rumbleSpeed : la vitesse de vibration (en milisecondes)
  • rumbleEvent : le déclenchement de l’événement (‘hover’, ‘click’, ‘mousedown’, ‘constant’)
  • posX : si l’élément est fixed ou absolute, choisir « left » ou « right » selon le CSS
  • posY : si l’élément est fixed ou absolute, choisir « top » ou « bottom » selon le CSS

Pour utiliser les options, on procède de la manière suivante.

$('#my-rumble-div').jrumble({
	rangeX: 3,
	rangeY: 3,
	rangeRot: 1
});

jRumble est actuellement sujet à des bugs sur Internet Explorer : l’option rumbleSpeed mise à 0 semble bloquer l’animation et la propriété CSS de rotation n’est pas implémentée sur le navigateur de Microsoft.

Requis : jQuery
Démonstration : http://jackrugile.com/jrumble/
Licence : MIT

Commentaires

  • Mohamed Hedi Maïza

    Merci pour le partage de ce plugin peu commun !

  • Güzel efekt. Her yerde kulanılabilir.