最近、いろんなサイトを見てたら、いろんなものがガタガタというか、ぶるぶるというか震えるのを見かけるんです。
例えば、
- Photoshop VIP ☞さんのロゴとか
- コリスさんのTOPへついーーーっといくやつ
とかが、マウスをのっけると、ガタガタぶるぶるいうんです。
これをどこかで使ってみたいなーと、みはら（@masashi_385）は調べました。
ら、あっさりみつかりました。
“jRumble”というjQueryのプラグインでした。
jRumbleをダウンロード
ここからダウンロードしてください。
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って聞くとなかなか手がでない… そんな方はきっとたくさんいますよねｗ でも、jQueryって、実はカンタンなんです。
でも、jQuery 日本語リファレンスとか見ても、これをどう使ったらいいのかいまいちピンとこない… ええ、たしかにそうですよね。ある程度わかってくると、リファレンス見ても理解できるんですが、最初のとっかかりとしては、なかなか難しいと思います。
なので、そんな方には、本をおススメします。KindleとかKoboとか電子書籍がこれだけ世の中に広まったというのに、紙の本をおススメします！
実際にWebサイトでの使用例が載っているので、jQueryってこんなことできるんだ！という感想を持ちます。それで、もちろんコードも載っているので、自分のサイトにも応用できちゃうわけですね。
[…] -jRumble jQuery のjrumble.1.3の組み込み（メモ） オブジェクトをガタガタ震わせるjQueryプラグイン“jRumble”の使い方 […]