無料でビットコインをもらえるのは、ビットフライヤー

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


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

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

jRumbleをダウンロード

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

jRumble | A jQuery Plugin That Rumbles Elements

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

使い方

head内に次のコードをコピペです。
[cc lang=”javascript”]


[/cc] #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ってこんなことできるんだ!という感想を持ちます。それで、もちろんコードも載っているので、自分のサイトにも応用できちゃうわけですね。

1 Comment

コメントを残す

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