/jRumble

jRumble is a jQuery plugin that rumbles, vibrates, shakes, and rotates any element you choose. It's great to use as a hover effect or a way to direct attention to an element. You can control the X, Y, and rotation range, the speed, and event trigger for the rumble.

Primary LanguageJavaScriptMIT LicenseMIT

jRumble v1.3

by Jack Rugile - http://jackrugile.com

jRumble is a jQuery plugin that rumbles, vibrates, shakes, and rotates any element you choose. It's great to use as a hover effect or a way to direct attention to an element.

  • Latest Version: 1.3
  • Latest Release Date: December 3, 2011
  • Original Release Date: March 30, 2011
  • Compressed: 1.47kb
  • Uncompressed: 4.84kb

Documentation, Demos, and Discussion

Documentation, demos, and discussion can be found at http://jackrugile.com/jrumble

Basic Usage

// Initialize jRumble on Selector
$('#rumble-element').jrumble();

// Start rumble on element
$('#rumble-element').trigger('startRumble');

// Stop rumble on element
$('#rumble-element').trigger('stopRumble');

Options

Option Default Description
x 2 Set the horizontal rumble range (pixels)
y 2 Set the vertical rumble range (pixels)
rotation 1 Set the rotation range (degrees)
speed 15 Set the speed/frequency in milliseconds between rumble movements (lower number = faster)
opacity false Activate opacity flickering while rumbling
opacityMin .5 When the opacity option is set to true, this controls the minimum opacity while flickering

Known Issues

  • For rumble elements that are position fixed/absolute, they should instead be wrapped in an element that is fixed/absolute
  • Rotation does not work in Internet Explorer 8 and below