[み]オブジェクトをガタガタ震わせるjQueryプラグイン“jRumble”の使い方


最近、いろんなサイトを見てたら、いろんなものがガタガタというか、ぶるぶるというか震えるのを見かけるんです。
例えば、

とかが、マウスをのっけると、ガタガタぶるぶるいうんです。
これをどこかで使ってみたいなーと、みはら(@masashi_385)は調べました。
ら、あっさりみつかりました。
“jRumble”というjQueryのプラグインでした。

jRumbleをダウンロード

ここからダウンロードしてください。

jRumble | A jQuery Plugin That Rumbles Elements

DEMOページにはいろんなガタガタがあるんでいろいろ試してみてください。

使い方

head内に次のコードをコピペです。

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jrumble.1.1.js"></script>
<script type="text/javascript">// <![CDATA[
$(document).ready(function(){
    $('#gata2').jrumble();
});
// ]]></script>

#gata2はガタガタさせたいやつのID名にします。
これだけで完了です。

※追記:クラス名でもだいじょぶです。
クラス名で指定する時は、.gata2とかにしてください。

いろんなガタガタ

このjRumbleはガタガタさせ具合をカスタマイズできます。

  • ガタガタする水平方向の距離(px)→rangeX(初期値:2)
  • ガタガタする垂直方向の距離(px)→rangeY(初期値:2)
  • ガタガタする角度(度)→rangeRot(初期値:1)
  • ガタガタするスピード→rumbleSpeed(初期値:10)※小さくすると速くなる
  • ガタガタする際のイベント→rumbleEvent(初期値:hover)※hover, click, mousedown, constant

全部jRumbleの公式サイトでデモを見られますので、試してください。

DEMO

jQueryを勉強しましょう

htmlとかCSSとかはなんとなくわかってきたんだけど、jQueryって聞くとなかなか手がでない… そんな方はきっとたくさんいますよねw でも、jQueryって、実はカンタンなんです。

でも、jQuery 日本語リファレンスとか見ても、これをどう使ったらいいのかいまいちピンとこない… ええ、たしかにそうですよね。ある程度わかってくると、リファレンス見ても理解できるんですが、最初のとっかかりとしては、なかなか難しいと思います。

なので、そんな方には、本をおススメします。KindleとかKoboとか電子書籍がこれだけ世の中に広まったというのに、紙の本をおススメします!

実際にWebサイトでの使用例が載っているので、jQueryってこんなことできるんだ!という感想を持ちます。それで、もちろんコードも載っているので、自分のサイトにも応用できちゃうわけですね。

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

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

commentsComment

  1. […] -jRumble jQuery のjrumble.1.3の組み込み(メモ) オブジェクトをガタガタ震わせるjQueryプラグイン“jRumble”の使い方 […]

commentYour Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

checkboxみはら.comはエックスサーバーです

PAGE TOP arrowup