PbTimes 情報誌

ブルブル震えるjQueryの紹介 jRumble

2013/08/02

• Plugin
• jQuery

ブルブル移動する動作を実現

jRumbleというjQueryプラグインを使用して、画像や文字などをガクガクブルブル震える動作を行うことができます。
設定方法もとても簡単ですぐに出来るため、興味があれば試してみてください。

仕組みもシンプルで、JavaScriptでランダムな位置数を生成して、それをCSSのtopやleftに適用して移動させるという処理をsetIntervalを使って連続で行っています。

ダウンロード

jRumbleのサイトの「Download」をクリックしてファイルを取得します。
解凍すると、「jquery.jrumble.1.3.js」と「demo」があります。
細かい設定は、demo内のindex.htmlをご覧ください。
一通り設定内容について記載されています。

サンプル

上記のようにするためには以下のように設定します。
一番シンプルな方法を紹介しています。

まず、jQueryとjquery.jrumble.1.3.jsを読込みます。

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

以下のようにJavaScriptを記述します。
今回は#demo1というIDに対して設定します。

$('#demo1').jrumble();

$('#demo1').hover(function(){
	$(this).trigger('startRumble');
}, function(){
	$(this).trigger('stopRumble');
});

HTMLを記述します。

<div id="demo1" style="padding:20px;background-color:#00FFFF;">ここが震えます。</div>

たったこれだけなんです!