Rumbles, Vibrates, Shakes, And Rotates Any Element Using Jquery Plugin

Ranges of x, y and rotation

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 of any element

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();
	
Back to Home