要素がぷるぷる震えるjQuery「jRumble」を使ってみる
今回はjQueryのプラグイン「jRumble」を使ってみます。
使ってみるとこんか感じです。
※オンマウスで動きます。
ダウンロードは公式サイトから
まずは、googleにホストされているjQueryを読み込みます。
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
jRumbleの読み込み
ファイルをアップロードしてHTMLファイルを変更
<script type="text/javascript" src="js/jquery.jrumble.1.3.js"></script>
上記をhead内に記述にしてjRumbleの場所を指定してあげます。
<script type="text/javascript">
$(function() {
$("id名もしくはクラス名").jrumble({x:2, y:2, rotation:1}).hover(function() {
$(this).trigger("startRumble");
}, function() {
$(this).trigger("stopRumble");
});
});
</script>
※id名またはクラス名は変更してください。
公式サイトにデモがたくさんありますのでぜひ見てみてください。
