和田憲幸のブログ

超軽量のアニメーション用Javascriptのデモ

すごく軽量です。50行ちょっとで1KB未満の軽いスクリプト。メソッドチェーンの練習がてら書いてみましたけど、やっぱりJavascriptって楽しいですねぇ。思い描いた通りに書けるって凄い懐の深い言語だなぁといつも感心させられます。

WebサイトやWebアプリケーションでちょっとアニメーションさせたい！なんてことありますよね。かといってjqueryを使うまでもない・・・。そんなあなたにうってつけのスクリプトが「motion.js」です！jqueryのanimateとほぼ同じように振る舞います。※CSSのtransitionに対応しているブラウザに限りますが。

さらに！呼び出す際に引数を追加することでオブジェクトを動的にappendすることもできるのがちょっと便利かも。デモのように何かしらボタンをクリックした時にGoogleマテリアルデザインのようなアニメーションを入れたい時なんかは、オブジェクトを用意しておくのではなく動的にオブジェクトを追加することができます。

ちなみにデモのウィンドウをクリックすると動的にランダムでどこかにオブジェクトが追加されてアニメーションします。まぁ一般的にはjqueryやその他のフレームワークを使っていると思うので使われることは無いでしょうけれど、軽量コンパクトなアニメーションだけをしたいJavascriptをお求めの場合はぜひご利用をご検討ください！