読者です 読者をやめる 読者になる 読者になる

要素を震えさせるjQueryプラグイン「jRumble」

jRumble | A jQuery Plugin That Rumbles Elements

面白いjQueryプラグインがありました。

デモ

マウスを載せると震えます。

 

x: // 水平方向の震える幅

y: // 垂直方向の震える幅

rotation: // 震える角度

speed: // 震える速さ

使い方

必要なファイル

jRumbleの基本コード

$('#震えさせる要素のid').jrumble();

これで指定した要素が震えるようになります。

震え方のパラメータはこのときに渡します。

$('#震えさせる要素のid').jrumble({
x: 2
, y: 2
, rotation: 1
, speed: 15
});

マウスオーバーをトリガーとする場合は、以下を続けて書きます。

$('#震えさせる要素のid').hover(function(){
  $(this).trigger('startRumble');
}, function(){
  $(this).trigger('stopRumble');
});

先に"どのように(How)"震えるかを指定し、続けて"いつ(When)"震えるかを別途指定します。

リンク先のサンプルではhoverやclick、mousedownなどのデモが置いてあります。これらはjQueryのトリガーです。

 

実際に何に使うかを問われれば何とも返せませんが、なかなか楽しいプラグインだったので試してみました。

(^ω^≡^ω^)