
ホームページにダイナミックな動きを!JavaScriptフレームワーク「mo.js」の特徴と使い方
JavaScriptはブラウザに組み込むだけで、複雑かつダイナミックな動きや機能を実装することができる非常に便利で汎用性のある言語です。
ただデメリットとしては、JavaScript単体でそのような表現をするには、複雑なコーディングを行う必要となることです。
その現実を目の前に諦めてしまう方も少なくないはずです。
しかし、そうした方にぜひお伝えしたい情報があります。
実は、JavaScriptの便利な機能をシンプルなコードで呼び出すことのできるライブラリを使うことで、先に述べたようなデメリットは一掃できます。非常に簡潔にダイナミックな動きを実装することが可能になります。
そこで今回は、JavaScriptライブラリの中でも、まるでFlashを使っているかのようになめらかな動きを実装することができる「mo.js」をご紹介します。
「mo.js」とは?
mo.jsは「Motion for the web」というキャッチコピーが付いた、なめらかな動きを実現可能にするJavaScriptライブラリです。
数行のシンプルなコードで、本格的なモーショングラフィックを作成することができます。
「mo.js」の特徴
アニメーションに関するJavaScriptライブラリはいくつかありますが、「mo.js」にはどんな特徴があるのでしょうか。
1. 軽量・高速・シンプル
シルクのようになめらかなアニメーションやエフェクト(Silky Smooth Animations and Effects)をシンプルなAPIで操作することができます。
2. Ratina対応
どんな高画質のスクリーンでも綺麗に表示することができるので、デバイスのスクリーンサイズに依存しません。
3. カスタマイズしやすい
モジュールと呼ばれる部品を、必要な時に必要なだけ組み合わせることができます。また、オープンソースプロジェクトを採用しているので、都度最新の状態でAPIを利用することができます。
まずはデモを見てみよう
それではまず、公式ホームページで公開されているデモの中から3つのデモをご紹介していきます。
その他のデモもこちらのデモ一覧で確認することができます。
1. MOTION for the Web
綺麗なベルの音とともにボールが降ってきて、MOTIONの文字になります。
これだけでもmo.jsの「なめらかさ」が実感できるのではないでしょうか。
See the Pen ·● MOTION for the web ●· by Ryo Sakai the ferret Web Writer (@ferretxryoxsakai) on CodePen.
### 2. Sleepy Mole 立方体が降ってきて、やがて地面からもぐらが眠そうにしながら起き上がってきます。 これも全部コードで実装されているというのは驚きですよ。See the Pen Mole :: property curves example by Ryo Sakai the ferret Web Writer (@ferretxryoxsakai) on CodePen.
### 3. Mograph 様々な幾何学模様がアニメーションとともに現れ、最後にMOJSのタイトルが現れます。See the Pen mograph by Ryo Sakai the ferret Web Writer (@ferretxryoxsakai) on CodePen.
- JavaScript
- JavaScript(ジャバスクリプト)とは、Webサイト上でさまざまなインタラクティブな動きを実現するために用いられる言語
- JavaScript
- JavaScript(ジャバスクリプト)とは、Webサイト上でさまざまなインタラクティブな動きを実現するために用いられる言語
- JavaScript
- JavaScript(ジャバスクリプト)とは、Webサイト上でさまざまなインタラクティブな動きを実現するために用いられる言語
- JavaScript
- JavaScript(ジャバスクリプト)とは、Webサイト上でさまざまなインタラクティブな動きを実現するために用いられる言語
- Flash
- Flashは米アドビ社が提供するAdobe Flashという作成アプリと、その作品を再生するブラウザ追加プログラムのFlashプレイヤーで構成される技術をいいます。データサイズが小さくより高速に転送される特徴を持ち、またゲームなどの高度なプログラミングも可能なことから多くのホームページ表現で利用されています。
- キャッチコピー
- キャッチコピーとは、商品などの宣伝の際に使用される文章のことです。 宣伝をする対象のイメージや特徴を簡潔にまとめつつ、見た人の印象に残る必要があります。一言で完結するものから数行になる文章など、実際の長さはバラつきがあります。 キャッチコピーの制作を職業とする人のことを、「コピーライター」と言います。
- JavaScript
- JavaScript(ジャバスクリプト)とは、Webサイト上でさまざまなインタラクティブな動きを実現するために用いられる言語
- JavaScript
- JavaScript(ジャバスクリプト)とは、Webサイト上でさまざまなインタラクティブな動きを実現するために用いられる言語
- デバイス
- デバイスとは「特定の機能を持つ道具」を表す語で、転じてパソコンを構成するさまざまな機器や装置、パーツを指すようになりました。基本的に、コンピューターの内部装置や周辺機器などは、すべて「デバイス」と呼ばれます。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- タイトル
- ホームページのソースに設定するタイトル(title)とは、ユーザーと検索エンジンにホームページの内容を伝えるためのものです。これを検索エンジンが認識し検索結果ページで表示されたり、ユーザーがお気に入りに保存したときに名称として使われたりするため、非常に重要なものだと考えられています。「タイトルタグ」ともいわれます。
おすすめ記事
おすすめエントリー
カテゴリから記事をさがす
Web マーケティング
- SEO(検索エンジン最適化)
- SNSマーケティング
- アプリマーケティング
- Web広告
- グロースハック
- ABテスト・EFO・CRO
- LP制作・LPO
- CMS・Webサイト制作
- 記事制作・ライティング
- コンテンツマーケティング
- メール配信・メールマーケティング
- マーケティングオートメーション(MA)
- リードジェネレーション(見込み顧客獲得)
- カスタマーサポート・カスタマーサクセス
- アクセス解析・広告効果測定
- データ分析
- リサーチ・市場調査
- 口コミ分析・ソーシャルリスニング
- O2O(Online to Offline)
- EC・通販・ネットショップ
- 多言語・翻訳
- 動画・映像制作
- AR・VR制作
- 統計データ
- マーケティングお役立ちレポート
- 連載
- チャットボット
- Web会議
- 動画マーケティング