jQuery plug-in jRumble implements jitter of web page elements_jquery

jRumble, it can make any element on the web page shake. Using this effect on your website will have a high chance of attracting the user's attention. The effect of this plug-in can be used on links or divs. You can set the shaking range, XY coordinates, shaking amplitude, etc. It can be set to vibrate when the mouse moves up or to vibrate all the time by default. The plug-in is quite customizable. PS: This plug-in still has some minor problems in IE

jQuery jRumble is how to use

<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>

jRumble parameter configuration

Option Default Description
rangeX 2 Set the horizontal rumble range (pixels)
rangeY 2 Set the vertical rumble range (pixels)
rangeRot 1 Set the rotation range (degrees)
rumbleSpeed ​​10 Set the speed/frequency in milliseconds of the rumble (lower number = faster)
rumbleEvent ‘hover’ Set the event that triggers the rumble (‘hover’, ‘click’, ‘mousedown’, ‘constant’)
posX ‘left’ If using jRumble on a fixed or absolute positioned element, choose ‘left’ or ‘right’ to match your CSS
posY ‘top’ If using jRumble on a fixed or absolute positioned element, choose ‘top’ or ‘bottom’ to match your CSS

jquery-jrumble.js source code

/*
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);

Online demo http://jackrugile.com/jrumble/#demos

Source code download http://jackrugile.com/jrumble/jquery.jrumble.1.3.zip

The above is the entire content of this article, I hope you all like it.