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

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

CSShake

CSShake_1

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

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

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

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


CSShakeの使用方法

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

http://elrumordelaluz.github.io/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」を設置しぶるぶると動かしてみると、
クリック率などがもしかしたら上がるかもしれないです。

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