ホームページにダイナミックな動きを！JavaScriptフレームワーク「mo.js」の特徴と使い方

更新日: 2018年05月29日

プログラミング言語

使い方

デモを確認しただけでも、本当に様々な動きが実装できるということを理解していただけたと思います。
シンプルなアニメーションであれば、それほど複雑なコードは必要ありません。
ここでは、小さなボールが跳ねるようなアニメーションを実装しながら、「mo.js」の使い方を確認していきましょう。
　　

1. HTMLを準備＆CSSで整形

まず、小さな円を描くために次のようなHTMLを記述します。

<div class="circle" id="js-circle"></div>

次に、このエリアに小さなボールを描くために、CSSで整形していきます。

.circle {
　　width: 50px;
　　height: 50px;
　　background: navy;
　　position: absolute;
　　top: 10px;
　　left: 50%;
　　margin-left: -25px;
　　margin-top:  -25px;
　　border-radius: 50%;
}

すると、このような感じで青いボールを表示することができます。

absolute属性を必ず指定して、自由に配置することができるようにしましょう。
　　

2. 「mo.js」ライブラリの読み込み

mo.jsを読み込みます。jQueryや他のライブラリには依存していないので、下記のコード(cdn)を読み込むだけでOKです。

<script src="http://cdn.jsdelivr.net/mojs/latest/mo.min.js"></script>

また、npmなら

npm install mo-js

bowerなら

bower install mojs

でmo.jsをインストールすることもできます。
　　

3. スクリプトの記述

次に、実際にどのように動くかを、スクリプトで記述していきます。

var circle = document.querySelector('#js-circle');
new mojs.Tween({
　　repeat: 999,
　　delay: 500,
　　speed: 0.3,
　　onUpdate: function(progress) {
　　　　var bounceProgress = mojs.easing.bounce.out(progress);
　　　　circle.style.transform = 'translateY(' + 200 * bounceProgress + 'px)';
　　}
}).play();

コードの解説

- var circle = … で円のオブジェクトを定義しています
- repeat・delay・speedはそれぞれ繰り返し回数・遅延時間・再生スピードを設定しています
- bounceProgressという変数は、mo.js特有のバウンスアウト(mojs.easing.bounce.out)を設定しています
- circle.style.transformの部分で、円のY座標にバウンス処理を加えた座標のアニメーションを実装しています