CSSを使ってクラス名を指定するだけで要素をブルブル((((；ﾟДﾟ))))震えさせることができる「CSShake」というプラグインを使ってみました。
CSSを読み込んで、クラス名を指定するだけで利用できるのでかなり便利に使えそうですね。
使い方はとても簡単で、ダウンロードした「csshake.js」を読み込み、ブルブルさせたい要素にクラスを指定すればOKです。
1.CSSを読み込む
|
1 |
<link rel="stylesheet" type="text/css" href="css/csshake.min.js" /> |
2.HTMLの対象とする要素にクラスを指定
● 要素に対して指定する場合
|
1 |
<div class="shake">ブルブル</div> |
● テキストのみに指定する場合
|
1 |
<div><span class="shake">文字だけブルブル</span></div> |
● 画像に指定する場合
|
1 |
<img src="buruburu.jpg" class="shake" /> |
3.動きを選ぶ（オプション）
基本動作としての.shakeは必ず指定します。
| shake | 基本 |
| shake shake-hard | 激しい動き |
| shake shake-slow | ゆっくり動き |
| shake shake-little | 小さな動き |
| shake shake-horizontal | 水平な動き |
| shake shake-vertical | 垂直な動き |
| shake shake-rotate | 回転するような動き |
| shake shake-opacity | 半透明になり点滅するような動き |
| shake shake-crazy | より激しい動き |
| shake shake-constant | コンスタントな動き |
▼ マウスオーバー後のオプション
| shake freez |
マウスをどかしたらその位置で停止 |
| shake shake-constant hover-stop | マウスオーバーで停止 |
ちょっとした遊び心のアクセントにいいかもしれませんね。