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

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

デモのキャプチャ

jRumble
デモ

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

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();
});

スクリプトのオプション

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

  • 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つのイベントに対応しています。

デモのキャプチャ

イベントのデモ

top of page

©2017 coliss