Learning jQuery

You must have seen shaking, vibrating or rotating elements on many sites and it can be done with CSS. In fact, take your mouse on my blog's logo and it will rotate. This is done using CSS. With CSS, you can't provide effects like shaking and vibrating. Today I will show you how can you provide these cool effects to elements using jQuery.

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.

To use this plugin, all you need to do is to download and include the reference and call the "jrumble()" method on the object.

//Code Starts
$(document).ready(function() {
    // Initialize jRumble on Selector
    $('img').jrumble();
    // Start rumble on element
    $('img').trigger('startRumble');
    // Stop rumble on element 
    $('img').trigger('stopRumble');
});?
//Code Ends

Available Options for customization

x: It is used to set the horizontal rumble range (pixels). Default value is 2.

y: It is used to set the vertical rumble range (pixels). Default value is 2.

rotation: It is used to set the rotation range (degrees). Default value is 1.

speed: It is used to set the speed/frequency in milliseconds between rumble movements (lower number = faster). Default value is 15.

opacity: It is used activate opacity flickering while rumbling. Default value is false.

opacityMin: When the opacity option is set to true, this controls the minimum opacity while flickering. Default value is .5.

So, the code with some basic options will look like,

//Code Starts
$(document).ready(function() {
    $('img').jrumble({
        x: 2,
        y: 2,
        rotation: 1
    });

    $('img').hover(function() {
        $(this).trigger('startRumble');
    }, function() {
        $(this).trigger('stopRumble');
    });
});?
//Code Ends

See result below.

Feel free to contact me for any help related to jQuery, I will gladly help you.