制作スタイル Style

面白い動きや便利な機能をJSで実装! その7:要素がガクガクブルブル震える変わった動き!

今回はマウスを上に乗せたときに要素がガクガクブルブル震えるプラグインをご紹介致します。
通常のマウスオーバーより凝った動きを入れたい場合など使えるかもしれません。
「jrumble.js」というプラグインを使用します。

デモ

画像の上にマウスを載せると画像がガクブル震えます。

テキストにも指定できます。

(;゚Д゚));(;゚Д゚));(;゚Д゚));

実装方法

jqueryとJSを設置致します。

<script type="text/javascript" src="[ファイルへのパス]/jquery.js"></script>
<script src="[ファイルへのパス]/jquery.jrumble.1.3.js"></script>

HTMLソースです。

<p><img src="[ファイルへのパス]/001.jpg" width="300" class="sample"></p>

スクリプトで動きを設定します。

<script type="text/javascript">
$(function() {
$('.sample').jrumble({
x: 2,
y: 2,
rotation: 1
});
$('.sample').hover(function(){
$(this).trigger('startRumble');
}, function(){
$(this).trigger('stopRumble');
});
});
</script>

これで実装完了です。
是非お試しください。

ファイルのダウンロードは下記からお願い致します。
http://jackrugile.com/jrumble/


シェアありがとうございます

  • このエントリーをはてなブックマークに追加
  • Pocket

Pagetop