jRumble – A jQuery plugin that adds vibrates, shakes, rotates and rumbles effects HTML elements for end-user attention

0
242

jRumble – A jQuery plugin that adds vibrates, shakes, rotates and rumbles effects HTML elements for end-user attention

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

 
//www.google-analytics.com/analytics.jshttp://jackrugile.disqus.com/embed.jshttps://platform.twitter.com/js/button.9594287b32ac4ed2228acac1d8fcd7c2.js//a.disquscdn.com/next/embed/alfie.f51946af45e0b561c60f768335c9eb79.js

Include jQuery and jRumble

Include jQuery and jRumble just before your closing body tag. Make sure the paths to your files are correct. I recommend including via Google Libraries API.


 type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
 type="text/javascript" src="js/jquery.jrumble.1.3.js">
					

Initialize jRumble on a Selector and Trigger Start or Stop

You can do this in a script tag within your HTML or in an external JavaScript file.


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

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

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

 jRumble | A jQuery Plugin That Rumbles Elements//www.google-analytics.com/analytics.jshttp://jackrugile.disqus.com/embed.jshttps://platform.twitter.com/js/button.9594287b32ac4ed2228acac1d8fcd7c2.js//a.disquscdn.com/next/embed/alfie.f51946af45e0b561c60f768335c9eb79.js

Options/Defaults

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

    by Jack Rugile – http://jackrugile.com


 

Website: http://jackrugile.com/jrumble/
Demo: http://jackrugile.com/jrumble/#demos
Download: https://github.com/jackrugile/jrumble/

Thanks for reading,

Web Editor 

LEAVE A REPLY

Please enter your comment!
Please enter your name here

twenty + seven =