CSS：ぶるぶる振える効果を出せるプラグイン「CSShake」

CSSの「CSShake」プラグインを使用してみました。
「CSShake」はクラスを指定した要素をぶるぶると振える効果を出すことができます。

ライセンスはMITライセンスです。

使用方法はとても簡単で「CSShake」プラグインを読み込み、
シェイクさせたい要素にクラスを設定するだけです。

指定するのは要素でも画像でもOKです。

下記にCSSの「CSShake」プラグインを使用して、指定した要素をぶるぶると振えさせた時の方法をメモします。

■ CSShakeの使用方法

下記URLより、「CSShake」プラグインをダウンロードします。
一番下にダウンロードのボタンがあります。

ダウンロードしたCSSを読み込み、ぶるぶる振えさせたい要素にクラスを設定します。

【読み込むファイル】

<link rel="stylesheet" type="text/css" href="csshake.css" />

【HTML】

「CSShake」を使用する要素に「class=”shake”」を記述します。

<div class="shake">test</div>

imgタグに設置する場合

<img src="test.png" class="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 shake-constant	常に動く
shake shake-constant hover-stop	常に動き、マウスオーバーしたら止まる

CSSでぶるぶると動きを出せるのは面白いですね。

クリックさせたいものなどに「CSShake」を設置しぶるぶると動かしてみると、
クリック率などがもしかしたら上がるかもしれないです。

強調させたい時など使うと良いかもしれないですね。

raining