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 |