要素をプルプル揺らす楽しいjQueryプラグイン「jRumble」

jRumbleの導入

ダウンロードサイト

本体は下のリンクからダウンロードできます。左のナビゲーションにカーソルを合わせるとプルプル震えます。

jRumbleの読み込み

他のプラグインと同様に、jQueryとjRumbleのパスを記述します。Google CDNの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>

jRumbleの使い方

基本の使い方

使い方も簡単です。id名をjrumbleとし、要素にホバーすると動くサンプルです。

$(function(){
//jRumbleをセット(初期化)      
　$('#jrumble').jrumble();

//マウスのホバーでjRumbleを実行
　$('#jrumble').on({
　　mouseener : function(){
　　　$(this).trigger('startRumble'); //実行開始
　　}, 
　　mouseleave : function(){
　　　$(this).trigger('stopRumble'); //実行終了
　　}
　});
});

基本の使い方　サンプル

オプションで動きのバリエーション

基本の使い方だけでも十分動きますが、オプションも用意されており、色々な動きが可能です。例えば上記のサンプルよりも動きを激しくしてみます。ここまでやると、もはやプルプルではなく暴れん坊ですがwww

$(function(){
//jRumbleをセット(初期化)      
　$('#jrumble').jrumble({
　　'x' : 15, //水平方向の揺れ幅
　　'y' : 15, //垂直方向の揺れ幅
　　'rotation' : 10 //揺れの回転の大きさ
　});

//マウスのホバーでjRumbleを実行
　$('#jrumble').on({
　　mouseener : function(){
　　　$(this).trigger('startRumble'); //実行開始
　　}, 
　　mouseleave : function(){
　　　$(this).trigger('stopRumble'); //実行終了
　　}
　});
});

激しい動き　サンプル

オプションの種類は以下の通りです。オプションを組み合わせ、マウスイベントなどと合わせていろいろなプルプルを楽しんでください。その他のデモは本サイトのデモでいろいろなバリエーションを見ることができます。

ちょっと特殊な効果なので、出番は少ないかもしれませんが、キャラクター的なものや、ロゴ、アイコンなどにちょっとした味付けとして使用してみてはいかがでしょうか？