Demos

Ranges

rangeX: 2
rangeY: 2
rangeRot: 1

1

rangeX: 10
rangeY: 10
rangeRot: 4

2

rangeX: 4
rangeY: 0
rangeRot: 0

3

rangeX: 0
rangeY: 0
rangeRot: 5

4
View Source 

$('#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
});

Rumble Speeds

0

5

50

6

100

7

200

8
View Source 

$('#demo5').jrumble({
        rumbleSpeed: 0
});

$('#demo6').jrumble({
        rumbleSpeed: 50
});

$('#demo7').jrumble({
        rumbleSpeed: 100
});

$('#demo8').jrumble({
        rumbleSpeed: 200
});

Event Types

Hover

9

Click

10

Mousedown

11

Constant

12
View Source 

$('#demo9').jrumble({
        rumbleEvent: 'hover'
});

$('#demo10').jrumble({
        rumbleEvent: 'click'
});

$('#demo11').jrumble({
        rumbleEvent: 'mousedown'
});

$('#demo12').jrumble({
        rumbleEvent: 'constant'
});

Absolute Positioning (Fixed positioning uses the same concept)

posX: 'left'
posY: 'top'

13

posX: 'right'
posY: 'top'

14

posX: 'left'
posY: 'bottom'

15

posX: 'right'
posY: 'bottom'

16
View Source 

$('#demo13').jrumble({
        posX: 'left',
        posY: 'top'
});

$('#demo14').jrumble({
        posX: 'right',
        posY: 'top'
});

$('#demo15').jrumble({
        posX: 'left',
        posY: 'bottom'
});

$('#demo16').jrumble({
        posX: 'right',
        posY: 'bottom'
});

Documentation

Options/Defaults

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