asd
Главные вкладки
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
- For rumble elements that are position fixed/absolute, they should instead be wrapped in an element that is fixed/absolute
- Rotation does not work in Internet Explorer 8 and below