[JS]あらゆる要素をガタガタ、ぷるぷる、ちりちりと振るわせるスクリプト -jRumble

テキストリンクやナビゲーションなど、ページ上のあらゆる要素を振るわせるjQueryのプラグインを紹介します。

jRumble
デモ

振るわせるアニメーションは、ガタガタをはじめ、ぷるぷる、ちりちり、などにすることができます。

[ad#ad-2]

jRumbleの実装

jRumbleの実装は簡単です。
div要素でもリンクでも、あらゆるDOM要素をガタガタさせることができます。

JavaScript

「jquery.js」と「jrumble.1.0.js」を外部ファイルとして指定します。

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jrumble.1.0.js"></script>

JavaScript

ガタガタさせるDOM要素をスクリプトで指定します。

$(document).ready(function(){
	$('#my-rumble-div').jrumble();
});

[ad#ad-2]

スクリプトのオプション

オプションでは下記の項目を指定できます。

• rangeX

  水平方向のガタガタする距離（px）

  初期値：2

• rangeY

  垂直方向のガタガタする距離（px）

  初期値：2

• rangeRot

  ガタガタする角度（度）

  初期値：1

• rumbleSpeed

  ガタガタするスピード

  初期値：10
  ※速くする場合は小さい数字に

• rumbleEvent

  ガタガタする際のイベント（hover, click, mousedown, constant）

  初期値：hover

• posX

  fixed, absoluteで配置されたDOM要素用のポジション

  初期値：left

• posY

  fixed, absoluteで配置されたDOM要素用のポジション

  初期値：top

ガタガタは、ホバー、クリック、マウスダウン、常時の4つのイベントに対応しています。

イベントのデモ