Blog

mo.jsを使った心地よいアニメーション

2017.04.11Cat:css3 javascript SVG デザイナー

CSS3 や SVG など、HTML5 のアニメーションに対応したブラウザが普及したことで、
アニメーションを実装するのが以前と比べて簡単になってきました。

そのため、以前と比べるとアニメーションを WEB ページの多くの要素に使う機会が増えてきます。

ただ、自力でとなると、どうしても技術や工数の問題などで、アニメーションの種類が簡単なものに偏り、ワンパターンになってしまいがちなのが、最近気になってきていました。

そこで、もっとリッチなアニメーションを実装するためのライブラリがないか探していたところ、以下のサイトで「mo.js」というライブラリが紹介されているのを見つけました。

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

デモを見ると、とても凝ったアニメーションが実装されており、
是非使ってみたいと思いました。

mo · js – Motion Graphics For The Web

mo.js は HTML の CSS3 と SVG によりアニメーションが実装されるため、
Canvas のように枠にとらわれることもなければ、HTML + CSS3 でのアニメーションのように、形が制限されることもありません。
また、IE9 以上のブラウザで使うことができるなど、多くのブラウザで使うことができるのも特徴です。

以下、mo.js を使って作ったものです。

DEMO

使ってみての感想としては、難易度が高めという印象を受けました。
理由は、

  • JavaScript や SVG について、ある程度使い慣れている前提のライブラリになっているよう
  • 習得するためには、チュートリアルを実践しながら、長い時間をかけて学習する必要がある
  • チュートリアルのデモコードが ECMAScript 6 で書かれているところがあるので、IEや旧ブラウザに対応させるために、そのままのコードは使えない場合がある(でもページからコードを引っこ抜く必要がある)

Author Profile

ninomiya
ninomiya
Webデザイナー兼コーダーです。 イラストを描くのも好きです。 SVGとCanvasを使ったWEBアプリにも興味があります。 よろしくお願いいたします。
» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ