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.
JavaScript HTML CSS
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
demo
MIT-License.txt
bower.json
changelog.txt
jquery.jrumble.js
jquery.jrumble.min.js Internet Explorer filter typo fix ("apha" changed to "alpha") Dec 4, 2011
package.json
readme.md update readme to reflect project inactivity Nov 4, 2016

readme.md

jRumble

Project Status: Inactive - The project has reached a stable, usable state but is no longer being actively developed; support/maintenance will be provided as time allows.

2016-11-04 Update

This project is no longer being developed or maintained. I recommend using the the CSS version, CSSShake by @elrumordelaluz. It performs a lot better and has tons of options.


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