[contact-form-7 id="1781" title="ご意見・ご要望・お問い合せ"]

Technical note

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

2016.11.08

要素をプルプル震わせるjQueryプラグイン「jRumble」。以前に自分の案件でも使用しましたが、動きが面白いので紹介したいと思います。

  1. jRumbleの導入
    1. ダウンロードサイト
    2. jRumbleの読み込み
  2. jRumbleの使い方
    1. 基本の使い方
    2. オプションで動きのバリエーション

jRumbleの導入

ダウンロードサイト

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

jRumble | A jQuery Plugin That Rumbles Elements - Jack Rugile デモ

jRumbleの読み込み

他のプラグインと同様に、jQueryとjRumbleのパスを記述します。Google CDNのjQueryのバージョンは適宜書き換えてください。

HTML
<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とし、要素にホバーすると動くサンプルです。

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

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

基本の使い方 サンプル

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

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

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

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

激しい動き サンプル

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

オプション 初期値 説明
x 2 水平方向の揺れ幅(px)
y 2 垂直方向の揺れ幅(px)
rotation 1 揺れの回転の大きさ(°)
speed 15 揺れの速度(ミリ秒)数値が低いほど早くなる
opacity false 揺れている間の透明度
opacityMin 0.5 揺れている間の透明度の最小値

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