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

Webの表現力は上がったと言われていますが、そのためのテクニックは必要です。SVGやCanvasを使いこなすのは相当難しく、専用のライブラリを使う方が手軽にアニメーションなどが実現できます。

今回紹介するmo · jsもその一つで、モーションアニメーションが実装できるライブラリです。

mo · jsの使い方

実装例です。かなり派手なアニメーションです。

クリックイベントと合わせた場合。メニューなどに使えそうです。

イラストとの連携もできます。

横から登場。

こちらもクリックイベントです。

Twitterのスターボタン風アニメーション。

mo · jsを使えば何も大きなアニメーションだけでなく、ユーザイベントをきっかけにしたアニメーションが実現できます。UXを高めるための施策に使えそうです。ちょっとしたアニメーションはユーザの目を引いたり、大事なポイントを気付かせるのに便利でしょう。

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

mo · js - Motion Graphics For The Web

legomushroom/mojs: motion graphics toolbelt for the web

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2