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

CSShakeは、クラス指定した要素にブルブルと振える効果を与えることができるCSSプラグイン。
使い方は簡単で、ダウンロードした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使用方法

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>
会いたくて 会いたくて


どれか一つの効果しか使わない場合は以下からダウンロードするのがいいかも。
csshake - CSS classes to move your DOM!










                     /■\
                 (_´∀`)_     わっしょい!
               /,/-_-_-_-_-_\     わっしょい!
        ( (   /,, /― ((神輿))―\    わっしょい!! //
             (。’。、。@,。,。,。,。,。,。,。,。,。,。,。@  ) )
             ∩ヽヽ∩ヽXXXXXXXX/ .∩
             i||i ∩i||i:||::::¥_][_¥::::||. i||i
             †人=†††¶┌┐¶††††
  /■\/■/■\[/■ /■\/■\]  /■\■\/■\
 ( ´∀(´∀(□二二( ´∀( ´∀( ´∀`).□´∀` )Д´)□∀`)
 ( |つ⊂|_ | | ノつつ|祭)~| |祭) ̄||祭) ̄|つ ⊂|_((|祭)~ノ | ) )つ
  〓_| |__〓」 〓_|=|_ 〓__ノ 〓二ノ〓二ノ) ( / (L〓|〓二|〓=〓ヽ
  し’し’ (_(_ し(_) (_)_)し(_)し(_)(_(_,(_)(_)し’  (_)

スポンサーリンク

シェアする

フォローする

スポンサーリンク
スポンサーリンク