文字やら画像やらを揺らすCSShakeの使い方

CSShakeは、クラス指定した要素にブルブルと振える効果を与えることができるCSSプラグイン。
使い方は簡単で、ダウンロードしたCSShakeを読み込んで、効果を与えたい要素にクラスを設定するだけ。
サイトのちょっとしたアクセントにも使えるし、手軽にキチガイっぽさを演出することができるので大変便利です。

CSShake

Some CSS classes to move your DOM! Easy-to-use classes that will add different kind of shake to each part of your site.

CSShake使用方法

CSShake使用方法

CSSを読み込む

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

対象とする要素にクラス指定

要素に対して指定

<div class="shake shake-constant">要素</div>

画像に対して指定

<img src="shake.jpg" class="shake shake-constant" />

効果の種類

ブルブル効果のバリエーションは全部で10種類。

shake

<div class="shake shake-constant">shake</div>

shake-hard

<div class="shake-hard shake-constant">shake-hard</div>

shake-slow

<div class="shake-slow shake-constant">shake-slow</div>

shake-little

<div class="shake-little shake-constant">shake-little</div>

shake-horizontal

<div class="shake-horizontal shake-constant">shake-horizontal</div>

shake-vertical

<div class="shake-vertical shake-constant">shake-vertical</div>

shake-rotate

<div class="shake-rotate shake-constant">shake-rotate</div>

shake-opacity

<div class="shake-opacity shake-constant">shake-opacity</div>

shake-crazy

<div class="shake-crazy shake-constant">shake-crazy</div>

shake-chunk

<div class="shake-chunk shake-constant">shake-chunk</div>

マウスオーバーで動きをつけたい場合

<div class="shake shake-constant-hover">shake-constant-hover</div>

マウスオーバーで動きを止めたい場合

<div class="shake shake-constant shake-constant--hover">shake-constant shake-constant--hover</div>

どれか一つの効果しか使わない場合は以下からダウンロードするのがいいかも。

elrumordelaluz/csshake

CSS classes to move your DOM! Contribute to elrumordelaluz/csshake development by creating an account on GitHub.

　　　　　　　　　　　　　　／■＼
　　　　　　　　　　　　　　　　（＿´∀｀）_　　　　　わっしょい！
　　　　　　　　　　　　　　／,/-_-_-_-_-_＼　　　　　わっしょい！
　　　　　　　　(　(　　　／,, /― （(神輿)）―＼　　　　わっしょい！！　／／
　　　　　　　　　　 (｡’｡､｡＠,｡,｡,｡,｡,｡,｡,｡,｡,｡,｡,｡＠　　)　)
　　　　　　　　　　 ∩ヽヽ∩ヽXXXXXXXX/ .∩
　　　　　　　　　　 i||i　∩i||i:||::::￥_][_￥::::||.　i||i
　　　　　　　　　　　　　†人=†††¶┌┐¶††††
　／■＼／■／■＼[／■ ／■＼／■＼]　／■＼■＼／■＼
　（　´∀（´∀（□二二（　´∀（　´∀（　´∀｀）.□´∀｀　）Д´）□∀｀）
　（ |つ⊂|_　| |　ﾉつつ|祭）~| |祭)￣||祭)￣|つ ⊂|＿(（|祭）~ﾉ　|　) ）つ
　〓_| |__〓」〓_|＝|_ 〓__ノ〓二ﾉ〓二ﾉ)　(　/ （L〓|〓二|〓=〓ヽ
　し’し’ （＿（_ し（＿）（＿）_）し（＿）し（＿）（_（＿,（＿）（＿）し’　（＿）