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

スポンサーリンク

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

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

CSS Shake

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

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

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

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

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

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

「Hacks」新着記事

カスタムブロックを追加するなら「Block Lab」プラグインを導入すると幸せかもしれない

Avatar for ホシナ カズキ

ホシナ カズキ

「Password Checkup」がChromeユーザーのセキュリティを守ってくれるかもしれない

Avatar for ホシナ カズキ

ホシナ カズキ

Facebookアプリで3D写真投稿機能をONにするには? 試してみたら本当にできた件

Avatar for ホシナ カズキ

ホシナ カズキ

Twitterアプリに搭載されたデータセーブ機能をONにする方法

Avatar for ホシナ カズキ

ホシナ カズキ

大規模・広範囲にわたるクラッキングによるWordPress改ざん事案が発生中

Avatar for ホシナ カズキ

ホシナ カズキ

もっと見る

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

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