0

要素をブルブル((((;゚Д゚))))震えさせるCSSプラグイン「CSShake」

要素をブルブル((((;゚Д゚))))震えさせるCSSプラグイン「CSShake」

CSSを使ってクラス名を指定するだけで要素をブルブル((((;゚Д゚))))震えさせることができる「CSShake」というプラグインを使ってみました。

CSSを読み込んで、クラス名を指定するだけで利用できるのでかなり便利に使えそうですね。

CSShake

使い方はとても簡単で、ダウンロードした「csshake.js」を読み込み、ブルブルさせたい要素にクラスを指定すればOKです。

1.CSSを読み込む

 

2.HTMLの対象とする要素にクラスを指定

● 要素に対して指定する場合

 

● テキストのみに指定する場合

 

● 画像に指定する場合

 

デモサンプル

 

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 マウスオーバーで停止

 

デモサンプル(オプション一覧)

 

ちょっとした遊び心のアクセントにいいかもしれませんね。




コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

mororeco > CSS > 要素をブルブル((((;゚Д゚))))震えさせるCSSプラグイン「CSShake」