【旧刊】WordPressテーマ制作のみを取り扱った別冊電子書籍がAmazon Unlimitedでお楽しみ頂けます!!
Amazon Unlimited内で 田中勇輔 で検索してください。

☓ 閉じる

7Aug2012

[jQuery] imgもpも、なんでもブルブルッとさせるプラグイン

jQuery Write Less, Do More
リニューアル関連ネタ第三弾。

といってもコレ自体はリニューアル前から使っていたモノです^^

今回ご紹介するのは「jRumble」。

当サイトのタイトルロゴなどで使用されている、マウスオーバーでブルブルッとする動きを実現させるプラグインです。

↓これ↓
((((;゚Д゚))))ガクガクブルブル

なんでもブルブルッとさせるjRumble

1. マウスオーバーでブルブルッ

PCでご覧の方は、当サイトの左上タイトルロゴにマウスカーソルをあわせてみて下さい。
本稿執筆時点でロゴにjRumbleを使用していますので、ブルブルするはずです。

「PCで」と前置きしましたが、スマホ版のサイトデザインではjRumbleを使用していません。
だってマウスカーソルなんて無いですから^^;

※web制作の際は全般的に、スマホ版はマウスオーバーがない、という点に注意が必要ですね。

2. 画像も文字もブルブルッ

当サイトでは画像(img要素)に使用していますが、実はなんの要素でも使えます。

つまり文字でもボックスでもブルッとさせる事ができます。

使い方は、ブルブルさせたい要素のIDを指定するだけ。

あらかじめ「rumble」というIDを登録しておき、ブルブルさせたい要素のIDにrumbleとつけると簡単ですね。

4. ブルブルッの動きを細かく指定可能

jQueryとjRumbleの外部ファイルを読み込んだ上で、使用するページのヘッダー内に設定を記述する必要があります。

※jQuery超初心者の方はこちらで導入方法を説明しています。
超簡単に開閉式リストができるjQueryライブラリ
jQueryのタグがつけられた記事一覧

まずはjQueryとjRumbleの外部ファイルを読み込み。(リンクは環境によって変えてくださいね^^;)


つぎにブルブルッの細かい動作を指定します。

$('#demo1').jrumble({
	x: 2, //横方向のブルブルッ幅
	y: 2, //縦方向のブルブルッ幅
	rotation: 1 //回転方向のブルブルッ角度
});

上の例は

「demo1」というIDの要素を
X方向に2
y方向に2
回転角度1

でブルブルッとさせる設定です。

全体的にブルブルさせる他、横方向にブルブルッするだけ、軸をずらさずカタカタ回転、などの使い方もできます。

詳しくは後述の作者サイトで確認してください^^

3. ブルブルッの導入方法

作者のサイトはこちら。
デモも豊富でわかりやすいですので、悩む事は少ないと思います。

作者のサイト(英語)
jRumble | A jQuery Plugin That Rumbles Elements
jrumble

日本語で紹介しているサイトも多いですので、そちらも紹介します。

僕が後追いで記事を書いても同じ内容がネットに氾濫するだけですので、こういう時は先人に敬意を示してリンクを張りましょう。(←めんどくさいだけ。)

日本語の解説記事

要素をブルブルさせるjQueryプラグイン「jRumble」

あらゆる要素をガタガタ、ぷるぷる、ちりちりと振るわせるスクリプト -jRumble

jQuery のjrumble.1.3の組み込み(メモ)

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

関連記事