日別アーカイブ: 2013/08/31

要素をプルプルプルプル動かせるjRumbleが楽しい

まずは何も言わず、デモサイトを見てみるんだ。

http://jackrugile.com/jrumble/

な!!楽しいだろう!!

あまりにプルプルプルプル動くから楽しくって、開発しながら笑ってしまうのよ、このプラグイン。

使い方

まずはjQueryを読み込むのと、プラグインを読み込む。
こんなかんじね

<script type="text/javascript" src="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>

プルプルプルプルさせたい要素に対してスクリプトを書くよ

$('#要素id').jrumble();
$('#要素id').hover(function(){
    $(this).trigger('startRumble');
}, function(){
    $(this).trigger('stopRumble');
});

これで動くはず。
上記サンプルはマウスオーバー時の処理なのだけれど、クリック時やずっと動きっぱなしな処理も出来るよ。
詳しくは公式サイトにゴー。

ライセンス

MIT Licenseです。やったあ。

使い所

なにせ目立つので、強調したいリンクや、ドッキリ的な仕掛けに使えそうだね。
うーん、楽しい。