動作の範囲
x: 1
y: 1
rotation: 0
［サンプル］プルプル震えるテキスト
x: 2
y: 2
rotation: 1
x: 10
y: 10
rotation: 4
x: 4
y: 0
rotation: 0
x: 0
y: 0
rotation: 5
ソースを見る
// ［サンプル］プルプル震えるテキスト
$('#text1').jrumble({
x: 1,
y: 1,
rotation: 0
});
// 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');
});
動作の速さ
speed: 0
speed: 50
speed: 100
speed: 200
ソースを見る
// 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: true
opacityMin: .75
opacityMin: .1
Caffeinated
ソースを見る
// 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');
});
発動するトリガーの種類
ホバー
クリック
マウスダウン
トリガー無し
（絶えず）
リモート（ホバーで右が作動）
リモート（ホバーで左が作動）
クリック後一定時間
トリガー無し
（律動）
ソースを見る
$('#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();
