【jQuery】要素をぶるぶる震わせられるプラグイン「jRumble」


マウスオーバーしたときに画像をぶるぶる震わせる、など訪問者を驚かせて楽しませることができるプラグインです。
今回使用したのは、jQueryプラグインjRumbleです。

↓以下が実際のソースサンプルです。

▼JavaScript

<link href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript" ></script>
<script src="./js/jquery.jrumble.1.3.min.js"></script>
<script type="text/javascript">
$(function() {
	$('#volcano').jrumble({
		x: 2,
		y: 2,
		rotation: 1
	});
	$('#volcano').hover(function(){
		$(this).trigger('startRumble');
	}, function(){
		$(this).trigger('stopRumble');
	});
});
</script>

▼CSS

<style type="text/css">
* {
	margin: 0;
	padding: 0;
}
body{
	text-align:center;
	margin-top:20px;
}
p{
	margin-bottom:10px;
}		 
</style>

▼HTML

<p>マウスオーバーでぶるぶる震えます</p>
<img id="volcano" src="images/01.jpg" width="200" height="200" />

今回、参考にさせていただいたのは、
ぶるぶる震えるjQueryプラグインを紹介します(jrumbleプラグイン)』さんです。
ありがとうございます。

デモページは、こちら