マウスでホバーするとブルブルブルブルブルブルふるえる仕掛けが施されたWebサイトをご覧になったことがある人も多いのではないでしょうか。

あの仕掛けをCSSのみで、しかもHTMLにclass属性を付与するだけで実装できるCSSフレームワーク「CSS Shake」をご紹介します。

いろいろなパターンのブルブルを実装するためのコードが詰まったCSSファイルをダウンロードして、自サーバーに設置して、サイトにlink要素で呼び出してやれば準備は完了です。

あとは実装したいブルブルのパターンに合わせて、実装したい要素のclass属性に基本となるshakeとパターンごとのclass名を付与してやるだけ。

ブルブルパターンのclass名や、実際どのようにブルブルするのかのデモは以下で確認してみてください。

[外部リンク] CSShake

いやー、おもしろいとは思うんですが、なかなかに使いドコロを考えさせられるんですよねコレ。

個人的にこのフレームワークをガッツリ使いたいなぁと思うのは、やっぱり千葉県船橋市非公認ご当地キャラクター・ふなっしーのオフィシャルサイトでしょうか。

今のふなっしーのオフィシャルサイトはなんかしょぼすぎるし、もっと遊び心のあるサイトしたほうがいいんじゃないかと思うんですよねー。このCSSフレームワークを使って、あのふなっしーの動きをゴリッと再現してみたいです。