【jQuery】Webページ上の要素をガクガクブルブルさせちゃうおもしろプラグイン「jrumble」を試行錯誤の上、ついに導入！

2012/07/08 2012/07/19

iPhone・iPad・Mac

どーもPITEです。

今日の午前中、アスファルトの道路に不注意で愛機MacBook Airを思いっきり落としてしまいました…。マジか…

ちょっと傷はついたものの中身は平気みたい。これから気をつけます…(´Д｀ )ｺﾞﾒﾝﾖ

まぁそれはそうと、悩みに悩みぬいた末にやっと本日WordPressでjQueryのプラグインを動かせるようになって来ました！

そこで数ヶ月も前からずっと使ってみたかったjQueryプラグイン「jrumble」をNumber333に導入しましたのでその紹介と設定方法を書いていきます。

「jrumble」とは？

今回紹介する「jrumble」というプラグイン、言葉で説明するよりも実際に見てもらったほうがわかりやすい、というか見ちゃえば一目瞭然なプラグインでございます。

試しに、この下の「笹食ってる場合じゃねぇ!!」の画像にマウスを当ててみてください。

iPhone・iPad・Mac

どうです？？

ブルブルしませんか？((´д｀)) ﾌﾞﾙﾌﾞﾙ

そうです。この「jrumble」というプラグイン、好きな要素をブルブル動かすことができちゃうプラグインなんです。

いやーおもしろいよね！！

画像だけじゃなくてdiv要素なんかも動かせちゃいます。
そしてマウスオーバーだけじゃなくて色々なアクションに対応させることもできます。

iPhone・iPad・Mac

こんな感じに定期的にブルブルさせることも可能。
使ってて楽しいプラグインです。

「jrumble」を導入してみる

続いて今度は「jrumble」の使い方を説明していきます。

jRumble | A jQuery Plugin That Rumbles Elements

まずは上記の公式サイトに飛んで「Download」というところからファイルをダウンロードしてきましょう。
この公式サイトでは英語ですが「jrumble」の使用例を紹介しているのでちょっと見ておくと良いかと思います。

「jrumble」を読み込む

ダウンロードできたら「jrumble」をサイトに読み込みましょう。

ダウンロードした「jquery.jrumble.1.3.js」または「jquery.jrumble.1.3.min.js」を任意の場所（基本はテーマフォルダ直下のjsフォルダ）にアップロードします。

アップロードができたら＜head＞内にそのファイルへのリンクを貼ってプラグインを使えるようにします。
この時jQueryの忘れずに読み込んでおいて下さい。

通常のサイトなら、

<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="/js/jquery.jrumble.1.3.js"></script>
</head>

こんな感じに単純に読み込ませてあげれば大丈夫ですが、WordPressだと不具合で動かなくなる場合があるので、


<?php wp_deregister_script('jquery'); wp_enqueue_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js', array(), '1.7.1'); ?>
<?php wp_enqueue_script('jrumble', get_bloginfo('template_url') . '/js/jquery.jrumble.1.3.js'); ?>

このように「wp_enqueue_script」を使ってあげると失敗する可能性が低いです。
このコードを使う場合は「wp_head」よりも上に書くように注意！

正常に動作していればこれで「jrumble」が使えるようになったはずデス！

スクリプトを書こう！


 $('#id名').jrumble({
  x: 2,
  y: 2,
  rotation: 2,
  speed: 40
 });

次は「jrumble」の設定を行なっていきます。
まず「#id名」の所にブルブルさせたい要素のidを入力しましょう。ちなみにidだと一つの要素しか指定できないので同じ設定で複数の要素に適用させたい場合はclassで指定しておくといいです。

このスクリプトの説明をすると、ｘが「横軸方向に揺れる大きさ」でyが「縦軸方向に揺れる大きさ」、rotationは「斜め方向」の揺れだと思って下さい。数値が大きいほど激しく動きます。
speedはそのまんま揺れる速さになっています。

最初はこのスクリプトだけ記述していたのですが、なぜか動かずかなり悩みました…。
しかし、ググってみたら下の記事に解決策が書いてあり、なんとかクリア！

jQuery のjrumble.1.3の組み込み（メモ） | Webutubutu!-Older

どうやら現在のバージョンは以前のものと仕様が違うみたいです。


 $('#id名').hover(function(){
  $(this).trigger('startRumble');
 }, function(){
  $(this).trigger('stopRumble');
 });

先程のコードに加えてこちらのコードも書き加えてみて下さい。
.hoverの部分が「マウスを乗っけたら動き出す」という命令になってます。
このコードがないと「jrumble」は動かないんですねー。


<script type="text/javascript">
$(document).ready(function(){
 $('#id名').jrumble({
  x: 2,
  y: 2,
  rotation: 2,
  speed: 40
 });
 
 $('.buru').hover(function(){
  $(this).trigger('startRumble');
 }, function(){
  $(this).trigger('stopRumble');
 });
  
});

そんでもって今までのをまとめたコードがコチラ！

このコードを＜head＞タグの中に放り込んでやれば準備完了です！！
さあ、ありとあらゆる要素をガクガクブルブル言わせてやりましょう！！