生き生きとしたモーションを作れるJSライブラリ、mo.jsがすごい | dwango creators’ blog(ドワンゴクリエイターズブログ)

こんにちは、デザイナーのサリーです。 相変わらずJSに対する苦手意識が拭えない私ですが、自分で動きまでつけられるになりたいですよね。私でも扱えそうなライブラリないかな〜と探していたら、「mo.js」というアニメーションライブラリのDEMOが素敵だったので、チュートリアルを見つつ使い方を勉強してみました。 今回は「mo.js」の紹介をしたいと思います。 mo.jsとは? mo · js – Motion Graphics For The Web 去年リリースされた、滑らかなモーションを実現できるJSライブラリです。 モーションが感動するほど軽快なので、ぜひDEMOをご覧ください。 DEMO motion graphics for the web 公式DEMOその1、ロゴのアニメーションです。美しいです。 軽快にはずむボールが、ちゃんと楕円になっているところに注目・・・! bubble layout 公式DEMOその2です。 集合した円は、地球儀のような球体の面を表してるようで、ドラッグでぐりぐり動かすことができます。円をクリックしたときのウインドウが開く動きが気持ちいいですね〜、弾けるように出てくるバツボタンも素敵です。 sleepy mole 公式DEMOその3、就寝前のモグラのアニメーション。 ロウソクを吹き消すモグラの、とても細かく丁寧に設定された動きが、反則的なまでにかわいいです(ツバ飛ばしてる・・・)。 http://tympanus.net/Development/Animocons/ こちらは公式のDEMOではありませんが、codropsさんがmo.jsを使用して作った、アニメーションするいいね!ボタンです。 何回も押したくなる気持ちよさ。ソースを拝見したところ、上の公式DEMOよりもずっと簡単に作れそうです。 対応ブラウザ Chrome 4+ Firefox 4+ Opera 11.5+ Safari 4+ IE 9+ ライセンスはMIT Licenseです。 mo.jsを使うための準備 mo.jsを読み込むだけで使えます。 jQueryには依存していません。 CDNの他、NPM、Bower、からも読み込みが可能です。 チュートリアルをやってみた チュートリアルが用意されていますが、現状Path

情報源: 生き生きとしたモーションを作れるJSライブラリ、mo.jsがすごい | dwango creators’ blog(ドワンゴクリエイターズブログ)