要素を小刻みに振動（wiggle）させる jqueryプラグイン3選-その3「jRumble1.3(最新版)」

2016/12/25 Jquery

【この記事を読むのに必要な時間は約 20 分です。】

3回にわたり画像などの要素を小刻みに振動（Wiggle）させるjqueryプラグインを紹介している。「jQuery Vibrate」、「ClassyWiggle」（旧「jQuery Wiggle plugin」）、「jRumble」の3つ。3回目として、個人的には当ブログにwiggle用にjqueryプラグインを設置するならこれかなと思っている「jRumble」を紹介したい。設置方法が簡単でカスタマイズが豊富でいてわかりやすいのが魅力的だ。

jRumbleのダウンロードとサーバーへのアップロード

注意事項

「jRumble」は、version1.0の解説が多く見られる。現在（2014年2月5日）は、version1.3となっており設定方法が変更されているので注意が必要。
また、clickでの振動（wiggle）のスタート/ストップにtoggleメソッドが利用されており、jQuery1.9以降では、ホームページに記載されているサンプルそのままでは動作しない。
作者にDiscussion欄から問い合わせたところ回答があったのでそちらで記載している。

ホームページ

こちらがjRumbleのホームページ。左側の「Download」からzipファイルをダウンロードできる。

1jrumble

また、GitHubのダウンロードページで右下の「DownloadZIP」からもダウンロードできる。

2jrumble

ダウンロードファイル：jquery.jrumble.1.3.zip
必要ファイルは解凍したフォルダの中にあるjquery.jrumble.1.3.min.jsファイルだけなので、これをサーバーにアップロードする。
必要ファイル：jquery.jrumble.1.3.min.js

設定方法とデモ

jRumbleの基本動作とオプション

基本構造として
初期化とオプション設定を
$('#rumble-element').jrumble();
トリガーとスタート設定を
$('#rumble-element').trigger('startRumble');
トリガーとストップ設定を
$('#rumble-element').trigger('stopRumble');
で行っている。
オプション設定とそのデフォルトは、以下のとおり。

3jrumble

トリガー（trigger）としてはデフォルトが「hover」（マウスが乗っている場合）で、その他に「click」、「mousedown」（マウスを押している場合）、「constant/timeout」（時間設定）が用意されている。

jQuery本体とjsファイルの呼び出しの設定

jQuery本体とjRumbleのjsファイルを呼び出す設定をする。
ヘッダー部分（<head>と</head>の間）に以下のように記載する。なお、jQuery本体はGoogle AJX APIのホスティングを利用している。

<!-- jquery本体 -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<!-- /jquery本体 -->

<!-- jRumble -->
<script type="text/javascript" src="http://（アップロード先URLを記載）/jquery.jrumble.min.js"></script>
<!-- /jRumble -->

動作設定のためのjsの設定

上記に続けて、ヘッダー部分（<head>と</head>の間）に以下のように記載する。
なお、クラスやID指定は自分のわかりやすいものでよい。今回はデモ用にID指定で「#jr○-○」のようにしている。

<!-- /jRumble setting -->
<script type="text/javascript">
$(function(){
    $('#jr1-1').jrumble({       // デモ１-1 default設定
        x: 2,                      // x軸の振幅（デフォルトなので設定しなくてもよい）        
        y: 2,                      // y軸の振幅（デフォルトなので設定しなくてもよい）
        rotation: 1,               // 傾き（デフォルトなので設定しなくてもよい）
        speed: 15,                 // 振動速度（デフォルトなので設定しなくてもよい）
        opacity: false,            // 透過なし（デフォルトなので設定しなくてもよい）
    });
    $('#jr1-1').hover(function(){  // トリガー（trigger）=hover
        $(this).trigger('startRumble');
    }, function(){
        $(this).trigger('stopRumble');
    });                                     

    $('#jr1-2').jrumble({       // デモ１-2 option設定
        x: 0,                      // x軸の振幅        
        y: 0,                      // y軸の振幅
        rotation: 2,               // 傾き
        speed: 0,                  // 振動速度
        opacity: true,             // 透過あり（デフォルトでopacityMin5）
    });
    $('#jr1-2').hover(function(){  // トリガー（trigger）=hover
        $(this).trigger('startRumble');
    }, function(){
        $(this).trigger('stopRumble');
    });

    $('#jr1-3').jrumble({       // デモ１-3 option設定
        x: 4,                      // x軸の振幅        
        y: 4,                      // y軸の振幅
        rotation: 3,               // 傾き
        speed: 50,                 // 振動速度
        opacity: true,             // 透過あり
        opacityMin: 1,             // ちらつき
    });
    $('#jr1-3').hover(function(){  // トリガー（trigger）=hover
        $(this).trigger('startRumble');
    }, function(){
        $(this).trigger('stopRumble');
    });


    $('#jr1-4').jrumble({       // デモ１-4 option設定
        x: 10,                     // x軸の振幅        
        y: 10,                     // y軸の振幅
        rotation: 5,               // 傾き
        speed: 100,                // 振動速度
        opacity: true,             // 透過あり
        opacityMin: 50,            // ちらつき
    });
    $('#jr1-4').hover(function(){  // トリガー（trigger）=hover
        $(this).trigger('startRumble');
    }, function(){
        $(this).trigger('stopRumble');
    });

    var jrumbling = false;      // デモ2-1 トリガー = Click
    $('#jr2-1').jrumble();
    $('#jr2-1').click(function(){
        if(jrumbling){
            $('#jr2-1').trigger('stopRumble');
            jrumbling = false;
        } else {
            $('#jr2-1').trigger('startRumble');
            jrumbling = true;
        }
    });

    $('#jr2-2').jrumble();      // デモ2-2  トリガー = Click(Timeout)
    var clickTimeout;
    $('#jr2-2').click(function(){
        $this = $(this);
        clearTimeout(clickTimeout);
        $this.trigger('startRumble');
        clickTimeout = setTimeout(function(){$this.trigger('stopRumble');}, 1500)
    });
    
    $('#jr2-3').jrumble();      // デモ2-3 トリガー = Press
    $('#jr2-3').bind({
        'mousedown': function(){
            $(this).trigger('startRumble');
        },
        'mouseup': function(){
            $(this).trigger('stopRumble');
        }
    });

    $('#jr3-1').jrumble();      // デモ3-1 Constant  
    $('#jr3-1').trigger('startRumble');

    $('#jr3-2').jrumble();      // デモ3-2 パルス
        var jrStart = function(){
        $('#jr3-2').trigger('startRumble');
        setTimeout(jrStop, 300);
        };
        var jrStop = function(){
        $('#jr3-2').trigger('stopRumble');
        setTimeout(jrStart, 300);
        };
        jrStart();

    var pulsing = false;        // デモ3-3 クリック/パルス
    var pulseTimeout;

    $('#jr3-3').jrumble();

    var pulseStart = function(){
    $('#jr3-3').trigger('startRumble');
    pulseTimeout = setTimeout(pulseStop, 300);
    };

    var pulseStop = function(){
    $('#jr3-3').trigger('stopRumble');
    pulseTimeout = setTimeout(pulseStart, 300);
    };

    $('#jr3-3').click(function(){
        if(pulsing){
            $('#jr3-3').trigger('stopRumble');
            clearTimeout(pulseTimeout);
            pulsing = false;
        } else {
            pulseStart();
            pulsing = true;
        }
    });
});
</script>
<!-- /jRumble setting -->

なお、デモ全ての動作を記載している。ひとつのデモだけの場合は、次のように切り取って記載する。例として上のハイライトした「デモ１default設定」だけにする場合。

<!-- /jRumble setting -->
<script type="text/javascript">
$(function(){
    $('#jr1-1').jrumble({       // デモ１-1 default設定
        x: 2,                      // x軸の振幅（デフォルトなので設定しなくてもよい）        
        y: 2,                      // y軸の振幅（デフォルトなので設定しなくてもよい）
        rotation: 1,               // 傾き（デフォルトなので設定しなくてもよい）
        speed: 15,                 // 振動速度（デフォルトなので設定しなくてもよい）
        opacity: false,            // 透過なし（デフォルトなので設定しなくてもよい）
    });
    $('#jr1-1').hover(function(){  // トリガー（trigger）=hover
        $(this).trigger('startRumble');
    }, function(){
        $(this).trigger('stopRumble');
    });                                     
});
</script>
<!-- /jRumble setting -->

表示（wiggle）したい部分の記載

ボディ部分（<body>と</body>の間）に以下のように記載する。なお、下のデモ表示と同じように記載してみた。

<div class="demobox1" id="jr1-1">Default</div>
<div class="demobox1" id="jr1-2">Option1</div>
<div class="demobox1" id="jr1-3">Option2</div>
<div class="demobox1" id="jr1-4">Option3</div>
<div style="clear:both;"></div>
<div class="demobox2" id="jr2-1" >Click</div>
<div class="demobox2" id="jr2-2" style="font-size:18px; line-height:50px;">Click<br />Timeout</div>
<div class="demobox2" id="jr2-3">Press</div>
<div style="clear:both;"></div>
<div class="demobox3" id="jr3-1" style="font-size:18px;">Constant</div>
<div class="demobox3" id="jr3-2">Pulse</div>
<div class="demobox3" id="jr3-3" style="line-height:50px;">Click<br />Pulse</div>
<div style="clear:both;"></div>

デモ用cssの設定

divボックスを用意してデモを表示しているので、参考のために示す。
ヘッダー部分（<head>と</head>の間）に以下のように記載する。

<!-- css for common-->
<style type="text/css">
.demobox1, .demobox2, .demobox3, .demobox4 {
	float: left;
	width: 100px;
	height:100px;
	color: #fff;
	font-size: 24px;
	font-weight: bold;
	line-height: 100px;
	margin: 20px;
	text-align: center;
	text-shadow: -2px 2px 0px rgba(0,0,0,.2);
	border-radius: 10px;           /*boxをCSS3角丸指定*/
    -moz-border-radius: 10px;      /*boxをFirefox用角丸指定*/
    -webkit-border-radius: 10px;   /*boxをSafari,Chrome用角丸指定*/
}
.demobox1:hover, .demobox2:hover, .demobox3:hover, .demobox4:hover {
    background: #f58;	
}
.demobox1 {
    background: #f36;
}
.demobox2 {
    background: #f39;
}
.demobox3 {
    background: #f3c;
}
</style>
<!-- /css for common -->

デモ表示

デモ1－デフォルト（hover）でオプション設定

①x 2/y 2/lotation 1/speed 15/opacity false
②x 0/y 0/lotation 2/speed 0/opacity true/Min 5
③x 4/y 4/lotation 3/speed 50/opacity true/Min 1
④x10/y10/lotation 5/speed100/opacity true/Min50

Default
Option1
Option2
Option3

デモ2－トリガー設定

①クリックでオン/オフ
②クリックでオン/時間でオフ
③マウスを押している間オン

Click
Click
Timeout
Press

デモ3－時間設定

①常時振動
②パルス
③クリックでオン/オフ（パルス）

Constant
Pulse
Click
Pulse

（参考）jQuery toggleメソッド

元々の作者のサンプルはトリガー（trigger）が「click」の場合、toggleメソッドを利用してスタート/ストップを切り替えているので、念のため、そのまま利用して設置する場合を示しておく。

読み込み

jQuery1.9以降を利用する場合、jqueryプラグイン「jQuery Migrate」も最初に読み込めば使える。ホスティングも利用できるので、以下のようにjQuery本体と一緒に読み込めばよい。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

toggleメソッドでの記載方法

上記に続けて、ヘッダー部分（<head>と</head>の間）とボディ部分（<body>と</body>の間）の設置したい場所へ以下のように記載する。

<!-- 上記に続けてヘッダー部分（<head>と</head>の間）に -->
<head>
<!-- jRumble -->
<script type="text/javascript" src="http://（アップロード先URLを記載）/jquery.jrumble.min.js"></script>
<!-- /jRumble -->
<!-- /jRumble setting -->
<script type="text/javascript">
$(function(){
	$('#toggle').jrumble();      // toggle method
    $('#toggle').toggle(function(){
        $(this).trigger('startRumble');
        }, function(){
        $(this).trigger('stopRumble');
     });
});
</script>
<!-- /jRumble setting -->
</head>
<!-- ボディ部分（<body>と</body>の間）の設置したい場所へ -->
<body>
<div id="toggle">TOGGLE</div>
</body>

「JSFiddle」を使ってみたかったので、「jQuery Migrate」を利用してtoggleメソッドでクリックにしたのがこれ。

これで３回目となるwiggle動作のjqueryプラグイン「jRumble1.3」の紹介はおわり。以上

要素を小刻みに振動（wiggle）させる jqueryプラグイン3選-その1「jQuery Vibrate」
要素を小刻みに振動（wiggle）させる jqueryプラグイン3選-その2「ClassyWiggle」もあわせてどうぞ。