mo.jsは「Motion Graphics For The Web」というキャッチコピーの、JavaScriptライブラリ。非常に簡単なコードで、本格的なモーショングラフィックを作成することができます。
使い方は次の通り
まずは、HTMLを準備して
<div class="square" id="js-square"></div>
CSSで整え、
.square {
width: 50px;
height: 50px;
background: #F64040;
position: absolute;
top: 10px;
left: 50%;
margin-left: -25px;
margin-top: -25px;
}
ライブラリを読み込みます。
<script src="http://cdn.jsdelivr.net/mojs/latest/mo.min.js"></script>
スクリプトを組み込みます。
var square = document.querySelector('#js-square');
new mojs.Tween({
repeat: 999,
delay: 2000,
onUpdate: function(progress) {
square.style.transform = 'translateY(' + 200 * progress + 'px)';
}
}).run();
これでアニメーションができあがります。ただ、これだけなら jQueryでも同じようなことができますが、ここに1行加えるだけで…
var square = document.querySelector('#js-square');
new mojs.Tween({
repeat: 999,
delay: 2000,
onUpdate: function(progress) {
var bounceProgress = mojs.easing.bounce.out(progress);
square.style.transform = 'translateY(' + 200 * bounceProgress + 'px)';
}
}).run();
弾むようなアニメーションが作れます。この他、デモサイトには数多くの高度なモーションが掲載されています。Flash並のアニメーションが JavaScriptで動作しています。
使いこなすには、かなりのセンスが問われそうですが、非常に可能性を感じるライブラリですね。