PAGE TOP

要素をガクブル((((;゚Д゚))))させるjQueryプラグイン「jrumble.js」

震える要素jQuery

使い所は少し悩ましいのですが、なんだか楽しいので紹介します。
マウスオーバーやクリック、角度やスピードなど、様々なオプションであらゆる要素をブルブル震わせることができます。

当ブログでは、右上のタイトルで使用しています。

DOWNLOAD

設置方法

jQuery

いつものようにヘッダにjQuery本体と、プラグインファイル「jquery.jrumble.1.3.min.js」をヘッダに読み込ませます。

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="<?php bloginfo('template_url')?>/js/jquery.jrumble.1.3.min.js"></script>

コントロールパラメーター(オプション)

同じくヘッダ内にコントロールを記述。オプションで揺れ幅や角度、スピードなど調節します。

<script>
$(document).ready(function(){
	$('.rumble').jrumble({  //任意のクラス
 		x: 1, //x軸の揺れ幅
		y: 1, //y軸の揺れ幅
		rotation: 1, //角度
		speed: 10 //揺れるスピード 数字が大きいほどゆっくり
	});
$('.rumble').hover(function(){
	$(this).trigger('startRumble');
	}, function(){
		$(this).trigger('stopRumble');
	});
 
});
</script>

準備は以上です。
あとは、震わせたい要素を任意のクラスで指定してあげるだけで、ブルブルと震えるようになります。
ブログタイトルやアイコン、キャラクターなどを震わせてアクセントに!


同じカテゴリのおすすめ記事

  • カテゴリー

  • 最近の投稿

  •