jRumbleどうやって使うの？ コピペしたら簡単に使える情報が欲しい。
こんにちは、浦島です。
今回は、要素がブルブルと震えるjQueryプラグイン「jRumble」を世界一簡単に紹介します。
プラグインのダウンロードはこちらから
必要なファイル
ダウンロードしたファイルを以下の二つのjavascriptをコピーしてきてください。
最終的に必要なファイルは下記を参照
コード説明
まずはjQueryとjRumble読み込み
|
1 2 |
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript" src="jquery.jrumble.1.3.js"></script> |
上が「jQuery」下が「jRumble」の読み込みです。
次に、コードの書き方
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<script type="text/javascript"> $(function() { $(".shiver").jrumble({ x:2, //縦軸の振り幅 y:2, //横軸の振り幅 rotation:1 //どれくらい様子が回転するか }).hover(function() { $(this).trigger("startRumble"); }, function() { $(this).trigger("stopRumble"); }); }); </script> |
これをbody内に書き込んでください。
最終的に今回作ったコードがこちら
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<html lang="ja"> <!DOCTYPE html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>test</title> <style> .shiver{ font-size: 100px; text-align: center; } </style> </head> <body> <p class="shiver"> ふるえる〜</p> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript" src="jquery.jrumble.1.3.js"></script> <script type="text/javascript"> $(function() { $(".shiver").jrumble({ x:2, //縦軸の振り幅 y:2, //横軸の振り幅 rotation:1 //どれくらい様子が回転するか }).hover(function() { $(this).trigger("startRumble"); }, function() { $(this).trigger("stopRumble"); }); }); </script> </body> </html> |
文字をサイズを大きくして中央に寄せてみました。
jRumbleのオプション
| オプション | 説明 | 初期値 |
| x | 水平の揺れ幅 | 2 |
| y | 垂直の揺れ幅 | 2 |
| rotation | 揺れの回転の大きさ | 1 |
| speed |
揺れの速度（ミリ秒）数値が低いほど早くなる。 |
15 |
| opacity | 透明度 | false |
| opacityMin | 透明度の最小値 | 0.5 |
以上、要素がブルブルと震えるjQueryプラグイン「jRumble」の紹介でした。
公式サイトには別のバリエーションも多数紹介されているので試してみてください。
Follow me!
