jRumble | A jQuery Plugin That Rumbles Elements
今回紹介するjRumbleは、バナー広告とかに使われていたりと既に結構有名かと思われますが、僕自身が好きなjQueryプラグインなので記事にしちゃいました！
ありふれた要素もこのプラグインを使ってブルブルさせると、不思議と愛嬌が出てきます。
なんだか「ほら！見て！私を見てよ！」って自己主張の激しいちょっと困ったちゃんを連想させるあたりが、無機質な要素に愛嬌を与えるというか。
ちょっとかまってあげたくなります。
はい、すいません僕だけかもしれませんね。使い方を紹介しましょう。
必要なものは公式サイトからダウンロードするjquery.jrumble.1.3.jsとjQuery、以下のようなコードだけです。
<img id="bulbul" src="dog.jpg">
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery.jrumble.1.3.min.js"></script>
<script type="text/javascript">
$('#bulbul').jrumble({
x: 2, //横の揺れ幅を設定
y: 2, //縦の揺れ幅を設定
rotation: 1 //回転角度の幅を設定
});
//hoverしたら、震えがスタートして、離れたらストップします。
$('#bulbul').hover(function(){
$(this).trigger('startRumble');
}, function(){
$(this).trigger('stopRumble');
});
</script>
横幅、縦幅や回転角度をいじってみるだけでも大分面白いですが、このプラグイン実はスピードや透明度（opacity）の設定もできます。スピードを調整すると非情にアグレッシブな振動も作れますし、ぱたぱたとかわいいく揺れるなんて表現も出来ます。
上記ではhoverの例で見せていますが、もちろん.clickでも動きますしsetTimeoutなどを使って自動で定期的に震わせるなんてことも出来ます。jsの書き方次第でいろいろとアレンジが可能なところが素敵です。
公式ページにこういったデモもあるので、使ってみたくなった方はぜひ！
