jRumblev1.3

Usage

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.


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

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');

Demos

Ranges

x: 2
y: 2
rotation: 1

1

x: 10
y: 10
rotation: 4

2

x: 4
y: 0
rotation: 0

3

x: 0
y: 0
rotation: 5

4
View Source 

// Demo 1
$('#demo1').jrumble({
x: 2,
y: 2,
rotation: 1
});

// Demo 2
$('#demo2').jrumble({
x: 10,
y: 10,
rotation: 4
});

// Demo 3
$('#demo3').jrumble({
x: 4,
y: 0,
rotation: 0
});

// Demo 4
$('#demo4').jrumble({
x: 0,
y: 0,
rotation: 5
});

$('#demo1, #demo2, #demo3, #demo4').hover(function(){
$(this).trigger('startRumble');
}, function(){
$(this).trigger('stopRumble');
});

Speeds

speed: 0

5

speed: 50

6

speed: 100

7

speed: 200

8
View Source 

// Demo 5
$('#demo5').jrumble({
speed: 0
});

// Demo 6
$('#demo6').jrumble({
speed: 50
});

// Demo 7
$('#demo7').jrumble({
speed: 100
});

// Demo 8
$('#demo8').jrumble({
speed: 200
});

$('#demo5, #demo6, #demo7, #demo8').hover(function(){
$(this).trigger('startRumble');
}, function(){
$(this).trigger('stopRumble');
});

Opacity

opacity: true

9

opacityMin: .75

10

opacityMin: .1

11

Caffeinated

12
View Source 

// Demo 9
$('#demo9').jrumble({
opacity: true
});

// Demo 10
$('#demo10').jrumble({
opacity: true,
opacityMin: .75
});

// Demo 11
$('#demo11').jrumble({
opacity: true,
opacityMin: .1
});

// Demo 12
$('#demo12').jrumble({
x: 6,
y: 6,
rotation: 6,
speed: 5,
opacity: true,
opacityMin: .05
});

$('#demo9, #demo10, #demo11, #demo12').hover(function(){
$(this).trigger('startRumble');
}, function(){
$(this).trigger('stopRumble');
});

Trigger Examples

Hover

13

Click

14

Mousedown

15

Constant

16

Remote

17

Remote

18

Timed (Click)

19

Pulse

20
View Source 

$('#demo13, #demo14, #demo15, #demo16, #demo17, #demo18, #demo19, #demo20').jrumble();

// Demo 13	
$('#demo13').hover(function(){
$(this).trigger('startRumble');
}, function(){
$(this).trigger('stopRumble');
});

// Demo 14
$('#demo14').toggle(function(){
$(this).trigger('startRumble');
}, function(){
$(this).trigger('stopRumble');
});

// Demo 15
$('#demo15').bind({
'mousedown': function(){
	$(this).trigger('startRumble');
},
'mouseup': function(){
	$(this).trigger('stopRumble');
}
});

// Demo 16
$('#demo16').trigger('startRumble');

// Demo 17
$('#demo17').hover(function(){
$('#demo18').trigger('startRumble');
}, function(){
$('#demo18').trigger('stopRumble');
});

// Demo 18
$('#demo18').hover(function(){
$('#demo17').trigger('startRumble');
}, function(){
$('#demo17').trigger('stopRumble');
});

// Demo 19
var demoTimeout;
$('#demo19').click(function(){
$this = $(this);
clearTimeout(demoTimeout);
$this.trigger('startRumble');
demoTimeout = setTimeout(function(){$this.trigger('stopRumble');}, 1500)
});

// Demo 20
var demoStart = function(){
$('#demo20').trigger('startRumble');
setTimeout(demoStop, 300);
};

var demoStop = function(){
$('#demo20').trigger('stopRumble');
setTimeout(demoStart, 300);
};

demoStart();

Documentation

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