CSSの「CSShake」プラグインを使用してみました。
「CSShake」はクラスを指定した要素をぶるぶると振える効果を出すことができます。
「CSShake」
ライセンスは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」を設置しぶるぶると動かしてみると、
クリック率などがもしかしたら上がるかもしれないです。
強調させたい時など使うと良いかもしれないですね。