ITエンジニア/デザイナ向けにオープンソースを毎日紹介

CSS3を使えばアニメーションも実現できますが、敷居はまだ高いように思います。せっかくの機能が使われないのは非常に勿体ない訳で、一つのライブラリとして提供されれば使いやすくなるのではないでしょうか。

ということで今回はCSS Shakeを紹介します。CSS3を使ってシェイクジェスチャーを実現するアニメーションライブラリです。

CSS Shakeのデモ

画像だと静止しているので全然分からないですね。
画像だと静止しているので全然分からないですね。

というわけでデモ動画です。

見事にシェイクされているのが分かります。

CSS Shakeの使い方

CSS Shakeは幾つかのクラスを定義しています。まずはスタイルシートを読み込みます。

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

これで準備完了です。基本形は次のようになります。

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

ハードなシェイクはshare-hardを追加します。

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

こんな感じで、

  • shake-slow

  • shake-little

  • shake-horizontal

  • shake-vertical

  • shake-rotate

  • shake-opacity

  • shake shake-crazy

などが定義されています。

マウスオーバーでちょこっと揺らしてみたり、通知がきたタイミングでアイコンを揺らしたりするのは面白いかも知れません。変化に気付いて欲しいコンテンツを表示する際に使えそうですね。

CSS ShakeはCSS3製、MIT Licenseのオープンソース・ソフトウェアです。

CSS Shake

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2