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

Webは基本的に表示されると全く動かないか、Flashによるスプラッシュのように最初だけアニメーションするかのどちらかが多いように思います。最近ではパララックスのようにスクロールによるアニメーションもありますが、それでも一旦表示されてしまえばそこで終わりです。

ユーザアクションによるアニメーションを実装したかったらBounce.jsを使ってみてはいかがでしょう。多様なアニメーションをCSS3で容易に実現できます。

Bounce.jsの使い方

この中央の四角がアニメーションします。
この中央の四角がアニメーションします。

左のメニューから様々なアニメーションが指定できます。
左のメニューから様々なアニメーションが指定できます。

実際のアニメーションは動画でご覧ください。

CSS3で実装されていますので負荷が低いように感じます。アニメーションは細かく制御できますので、ユーザのクリックアクションやマウスオーバーに合わせてちょっとだけ揺らしたり、新機能の紹介時に目を引くのに使ったりできそうですね。

Bounce.jsはJavaScript/CSS3製のオープンソース・ソフトウェア(MIT License)です。

Bounce.js

tictail/bounce.js

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2