Le plug-in jQuery jRumble implémente la gigue de la page Web elements_jquery

jRumble, il peut faire trembler n'importe quel élément de la page Web. L'utilisation de cet effet sur votre site Web aura de grandes chances d'attirer l'attention de l'utilisateur. L'effet de ce plug-in peut être utilisé sur des liens ou des divs. Vous pouvez définir la plage d'agitation, les coordonnées XY, l'amplitude d'agitation, etc. Il peut être configuré pour vibrer lorsque la souris monte ou pour vibrer tout le temps par défaut. Le plug-in est assez personnalisable. PS : Ce plug-in présente encore quelques problèmes mineurs dans IE

jQuery jRumble explique comment utiliser

<script type="text/javascript" src="js/jquery-jrumble.js"></script>
<script type="text/javascript">
$(document).ready(function(){     
 $('#demo1').jrumble({
 rangeX: 2,
 rangeY: 2,
 rangeRot: 1
 });
 
 $('#demo2').jrumble({
 rangeX: 10,
 rangeY: 10,
 rangeRot: 4
 });
 
 $('#demo3').jrumble({
 rangeX: 4,
 rangeY: 0,
 rangeRot: 0
 });
 
 $('#demo4').jrumble({
 rangeX: 0,
 rangeY: 0,
 rangeRot: 5
 });
 
 $('#demo5').jrumble({
 rumbleSpeed: 0
 });
 
 $('#demo6').jrumble({
 rumbleSpeed: 50
 });
 
 $('#demo7').jrumble({
 rumbleSpeed: 100
 });
 
 $('#demo8').jrumble({
 rumbleSpeed: 200
 });
 
 $('#demo9').jrumble({
 rumbleEvent: 'hover'
 });
 
 $('#demo10').jrumble({
 rumbleEvent: 'click'
 });
 
 $('#demo11').jrumble({
 rumbleEvent: 'mousedown'
 });
 
 $('#demo12').jrumble({
 rumbleEvent: 'constant'
 }); 
 
 $('#demo13').jrumble({
 posX: 'left',
 posY: 'top'
 });
 
 $('#demo14').jrumble({
 posX: 'right',
 posY: 'top'
 });
 
 $('#demo15').jrumble({
 posX: 'left',
 posY: 'bottom'
 });
 
 $('#demo16').jrumble({
 posX: 'right',
 posY: 'bottom'
 }); 
 
 $('.view-source pre').hide();
 $('.view-source a').toggle(function(){
 $(this).siblings('pre').stop(false, true).slideDown(500);
 $(this).html('Hide Source');
 }, function(){
 $(this).siblings('pre').stop(false, true).slideUp(500);
 $(this).html('View Source');
 });
});
</script>

Configuration des paramètres jRumble

Description par défaut de l'option
rangeX 2 Définir la plage de grondement horizontal (pixels)
rangeY 2 Définir la plage de grondement vertical (pixels)
rangeRot 1 Définir la plage de rotation (degrés)
rumbleSpeed ​​​​10 Réglez la vitesse/fréquence en millisecondes du grondement (nombre inférieur = plus rapide)
rumbleEvent 'hover' Définit l'événement qui déclenche le grondement ("hover", "click", "mousedown", "constant")
posX 'left' Si vous utilisez jRumble sur un élément positionné fixe ou absolu, choisissez 'left' ou 'right' pour correspondre à votre CSS
posY 'top' Si vous utilisez jRumble sur un élément positionné fixe ou absolu, choisissez 'top' ou 'bottom' pour correspondre à votre CSS

Code source de jquery-jrumble.js

/*
jRumble v1.1 - http://jackrugile.com/jrumble
by Jack Rugile - http://jackrugile.com
Copyright 2011, Jack Rugile
MIT license - http://www.opensource.org/licenses/mit-license.php
*/

(function($){
 $.fn.jrumble = function(options){
 
 // JRUMBLE OPTIONS
 //---------------------------------
 var defaults = {
  rangeX: 2,
  rangeY: 2,
  rangeRot: 1,
  rumbleSpeed: 10,
  rumbleEvent: 'hover',
  posX: 'left',
  posY: 'top'
 };

 var opt = $.extend(defaults, options);

 return this.each(function(){
  
  // VARIABLE DECLARATION
  //---------------------------------
  $obj = $(this);  
  var rumbleInterval; 
  var rangeX = opt.rangeX;
  var rangeY = opt.rangeY;
  var rangeRot = opt.rangeRot;
  rangeX = rangeX*2;
  rangeY = rangeY*2;
  rangeRot = rangeRot*2;
  var rumbleSpeed = opt.rumbleSpeed;  
  var objPosition = $obj.css('position');
  var objXrel = opt.posX;
  var objYrel = opt.posY;
  var objXmove;
  var objYmove;
  var inlineChange;
  
  // SET POSITION RELATION IF CHANGED
  //---------------------------------
  if(objXrel === 'left'){
  objXmove = parseInt($obj.css('left'),10);
  }
  if(objXrel === 'right'){
  objXmove = parseInt($obj.css('right'),10);
  }
  if(objYrel === 'top'){
  objYmove = parseInt($obj.css('top'),10);
  }
  if(objYrel === 'bottom'){
  objYmove = parseInt($obj.css('bottom'),10);
  }
  
  // RUMBLER FUNCTION
  //---------------------------------  
  function rumbler(elem) {  
  var randBool = Math.random();
  var randX = Math.floor(Math.random() * (rangeX+1)) -rangeX/2;
  var randY = Math.floor(Math.random() * (rangeY+1)) -rangeY/2;
  var randRot = Math.floor(Math.random() * (rangeRot+1)) -rangeRot/2; 
  
  // IF INLINE, MAKE INLINE-BLOCK FOR ROTATION
  //---------------------------------
  if(elem.css('display') === 'inline'){
   inlineChange = true;
   elem.css('display', 'inline-block')
  }
  
  // ENSURE MOVEMENT
  //---------------------------------  
  if(randX === 0 && rangeX !== 0){
   if(randBool < .5){
   randX = 1;
   }
   else {
   randX = -1;
   }
  }
  
  if(randY === 0 && rangeY !== 0){
   if(randBool < .5){
   randY = 1;
   }
   else {
   randY = -1;
   }
  }
  
  // RUMBLE BASED ON POSITION
  //---------------------------------
  if(objPosition === 'absolute'){
   elem.css({'position':'absolute','-webkit-transform': 'rotate('+randRot+'deg)', '-moz-transform': 'rotate('+randRot+'deg)', '-o-transform': 'rotate('+randRot+'deg)', 'transform': 'rotate('+randRot+'deg)'});
   elem.css(objXrel, objXmove+randX+'px');
   elem.css(objYrel, objYmove+randY+'px');
  }
  if(objPosition === 'fixed'){
   elem.css({'position':'fixed','-webkit-transform': 'rotate('+randRot+'deg)', '-moz-transform': 'rotate('+randRot+'deg)', '-o-transform': 'rotate('+randRot+'deg)', 'transform': 'rotate('+randRot+'deg)'});
   elem.css(objXrel, objXmove+randX+'px');
   elem.css(objYrel, objYmove+randY+'px');
  }
  if(objPosition === 'static' || objPosition === 'relative'){
   elem.css({'position':'relative','-webkit-transform': 'rotate('+randRot+'deg)', '-moz-transform': 'rotate('+randRot+'deg)', '-o-transform': 'rotate('+randRot+'deg)', 'transform': 'rotate('+randRot+'deg)'});
   elem.css(objXrel, randX+'px');
   elem.css(objYrel, randY+'px');
  }
  } // End rumbler function
  
  // EVENT TYPES (rumbleEvent)
  //--------------------------------- 
  var resetRumblerCSS = {'position':objPosition,'-webkit-transform': 'rotate(0deg)', '-moz-transform': 'rotate(0deg)', '-o-transform': 'rotate(0deg)', 'transform': 'rotate(0deg)'};
  
  if(opt.rumbleEvent === 'hover'){
  $obj.hover(
   function() {
   var rumblee = $(this);
   rumbleInterval = setInterval(function() { rumbler(rumblee); }, rumbleSpeed);
   },
   function() {
   var rumblee = $(this);
   clearInterval(rumbleInterval);
   rumblee.css(resetRumblerCSS);
   rumblee.css(objXrel, objXmove+'px');
   rumblee.css(objYrel, objYmove+'px');
   if(inlineChange === true){
    rumblee.css('display','inline');
   }
   }
  );
  }
  
  if(opt.rumbleEvent === 'click'){
  $obj.toggle(function(){
   var rumblee = $(this);
   rumbleInterval = setInterval(function() { rumbler(rumblee); }, rumbleSpeed);
  }, function(){
   var rumblee = $(this);
   clearInterval(rumbleInterval);
   rumblee.css(resetRumblerCSS);
   rumblee.css(objXrel, objXmove+'px');
   rumblee.css(objYrel, objYmove+'px');
   if(inlineChange === true){
   rumblee.css('display','inline');
   }
  });
  }
  
  if(opt.rumbleEvent === 'mousedown'){
  $obj.bind({
   mousedown: function(){
   var rumblee = $(this);
   rumbleInterval = setInterval(function() { rumbler(rumblee); }, rumbleSpeed);
   }, 
   mouseup: function(){
   var rumblee = $(this);
   clearInterval(rumbleInterval);
   rumblee.css(resetRumblerCSS);
   rumblee.css(objXrel, objXmove+'px');
   rumblee.css(objYrel, objYmove+'px');
   if(inlineChange === true){
    rumblee.css('display','inline');
   }
   },
   mouseout: function(){
   var rumblee = $(this);
   clearInterval(rumbleInterval);
   rumblee.css(resetRumblerCSS);
   rumblee.css(objXrel, objXmove+'px');
   rumblee.css(objYrel, objYmove+'px');
   if(inlineChange === true){
    rumblee.css('display','inline');
   }
   }
  });
  }
  
  if(opt.rumbleEvent === 'constant'){
  var rumblee = $(this);
  rumbleInterval = setInterval(function() { rumbler(rumblee); }, rumbleSpeed);
  }
  
 });
 }; 
})(jQuery);

Démo en ligne http://jackrugile.com/jrumble/#demos

Téléchargement du code source http://jackrugile.com/jrumble/jquery.jrumble.1.3.zip

Ce qui précède représente l’intégralité du contenu de cet article, j’espère que vous l’aimerez tous.