
ホームページにダイナミックな動きを!JavaScriptフレームワーク「mo.js」の特徴と使い方
使い方
デモを確認しただけでも、本当に様々な動きが実装できるということを理解していただけたと思います。
シンプルなアニメーションであれば、それほど複雑なコードは必要ありません。
ここでは、小さなボールが跳ねるようなアニメーションを実装しながら、「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座標にバウンス処理を加えた座標のアニメーションを実装しています
4. 完成
再生すると、重いボールが跳ねながら落ちるアニメーションを実装することができました。
See the Pen QdbPVL by Ryo Sakai the ferret Web Writer (@ferretxryoxsakai) on CodePen.
- HTML
- HTMLとは、Webページを記述するための言語です。"HyperText Markup Language "の略です。"<"と">"にはさまれたさまざまな種類の「タグ」によって、文章の構造や表現方法を指定することができます。
- CS
- CSとはCustomer Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。
ツール紹介記事
カテゴリから記事をさがす
Web マーケティング
- SEO(検索エンジン最適化)
- SNSマーケティング
- アプリマーケティング
- Web広告
- グロースハック
- ABテスト・EFO・CRO
- LP制作・LPO
- CMS・サイト制作
- 記事制作・ライティング
- コンテンツマーケティング
- メールマーケティング
- マーケティングオートメーション(MA)
- リードジェネレーション
- カスタマーサポート・カスタマーサクセス
- アクセス解析・広告効果測定
- データ解析・BI
- リサーチ・市場調査
- 口コミ分析・ソーシャルリスニング
- O2O・OMO
- EC・通販・ネットショップ
- 多言語・翻訳
- 動画・映像制作
- AR・VR制作
- マーケティングお役立ちレポート
- Web接客・チャットボット
- Web会議
- 動画マーケティング
- フォーム作成
- CRM(顧客管理)
- ABM
その他のカテゴリ

現在の会員数483,985人
メールだけで登録できます→
会員登録する【無料】