Webサイトの特定要素をブルブルさせるためだけのCSSフレームワーク「CSS Shake」

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

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

CSS Shake

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

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

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

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

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

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

「CSS」新着記事

Google Analytics連携でアクセスランキングを作れる「Ranklet」の汎用テンプレートを作ってみた件

Avatar for ホシナ カズキ

ホシナ カズキ

【楽天koboにも対応】カエレバやヨメレバをレスポンシブな紹介リンクにするためのCSSデザイン

Avatar for ホシナ カズキ

ホシナ カズキ

Sassに移行したのでどんな環境でサースってるのかをまとめてみた件

Avatar for ホシナ カズキ

ホシナ カズキ

CSSの calc() ファンクションを使って長さを計算しサイズ指定する方法

Avatar for ホシナ カズキ

ホシナ カズキ

ホバー表示のツールチップを独自データ属性とCSSだけで作る方法

Avatar for ホシナ カズキ

ホシナ カズキ

もっと見る

モバデビはモバイルやウェブのネタ、ニュースMaciPhoneなどのApple関連、WordPressのことなど、いろいろ書く雑食系ブログメディア。
ためになるかもしれないし、ならないかもしれない。そこそこ更新してますそこそこ。

このブログについてもっと詳しく