MO.JSライブラリでアニメートする方法

Sep 17, 2025

操作方法

（イメージクレジット：Pexels / Frank Kagumba）

MO.JSは、フルスクリーンページアニメーションローダを促進するだけでなく、マイクロインタラクション、および形状操作のトンをクリックします。

Webデザインシーンに従っていたら、しばらくの間、あなたが幅広く終わったこと、またはおそらくインタラクティブされたアニメーションテクニックとライブラリとの間で相互作用する可能性があります。 CSS、HTML5、JavaScriptなどのコアテクノロジはさらに強力になりつつあり、ブラウザのサポートは時間とともに改善しています。意味は、より洗練されたWebアニメーションをデバイス間でサポートできることです。あなたが複雑なサイトを構築しているなら、あなたの ウェブホスティング サービスはあなたのプロジェクトをサポートすることができなければなりません。

アニメーションインスピレーションが必要ですか？これがトップの素晴らしい例です CSSアニメーション 再現するために。コーディングなしでサイトを構築したいですか？これらを試してみてください ウェブサイトのビルダー 。

MO.JSがどのように役立つことができますか？

Webアニメーション、表示されるように、滞在するためにここにあります。ただし、最も一般的なアニメーションテクニックとの欠点は、スライドショー、タブボタン、ドロップダウンメニューなど、従来のUI / UX要素のアニメーションに向けて重力していることです。その結果、それらを使用することは最終的にあなたのサイトを慣れていて刺激的ではないことになります。

mo.jsはこれを助けることができます。ライブラリを使用すると、HTML、Shape、Swirl、Burst、Staggerなどの組み込みコンポーネントを利用して、通常のサイト要素をアニメートするのに役立ちます。ライブラリは非常に使いやすく、高速、網膜準備完了、モジュール式、オープンソースです。このチュートリアルでは、MO.JSを扱う基本が導入され、2つの技術が実証されています。爆風と泡

01.はじめに

チュートリアルファイルを保存するために、デスクトップ上のフォルダMO.JSを作成することから始めます。その中に3つの追加フォルダを作成します.JavaScriptファイル用のスタイリングファイル、IMG、JS用のIMGを格納します。 HTMLファイルはルートフォルダに保存されます。（あなたはバックアップを検討したいかもしれません クラウドストレージ ）。

02.ページ構造を作成します

コードエディタを開き、メインのWebページにマークアップするためのindex.html文書を作成します。基本構造を作成して、ページに適切なタイトルを付けることから始めます。

＆lt; Doctype HTML＆GT。
＆ltml lang = "en"＆gt;
    ＆lt;頭＆gt;
        ＆lt; Meta Charset = "UTF-8"＆gt;
        ブラスト技術＆lt;
タイトル＆gt;
 ＆lt; / gt;
＆lt; body＆gt; ＆lt; / body＆gt;
＆lt; / html＆gt;

03.ページを構成します

チュートリアルは2つの部分に分かれています。最初のものはBLAST技術を示していますが、2番目はバブルの概念を示しています。その結果、テクニックごとに1つずつ、2つのHTMLファイルを用意します。 BLASTテクニックをキックスタートするには、ページのタイトルを含むDIVセクションを作成します。左上隅にあるスタイル化されていないテキストを観察する必要があるブラウザにページをレンダリングします。

04. CSSをリンクします

CSSフォルダ内にコードエディタを開き、Styletes.cssファイルを作成します。このコードをヘッドセクションに追加することによって、このファイルへのリンクをHTML文書にリンクを作成します。 ＆lt; link rel = "stylesheet" href = "css / styles.css"＆gt; 。スタイルは追加されていないため、ページはステップ3に示すようにレンダリングされています。あるいは、スタイリングは最小限であるため、HTMLとCSSを組み合わせることでインラインスタイルを使用することを選択できます。

05.背景をスタイル

Mo.js: step 5 — （イメージクレジット：Pexels / Frank Kagumba）

次に、背景画像を追加することで背景をスタイルします。私たちはPexelsからNikolai Ultangによって無料の風光明媚な風景の背景を使った。あなたはできるここでダウンロードしてください。 IMGフォルダ内のこの（または自分の画像）を保存してください。背景に変更を表示するようにページをレンダリングします。

ボディ、HTML {
  背景画像：URL（bg.jpg）;
  背景サイズ：カバー。
  パディング：0;
  マージン：0;
  幅：100％。
  高さ：100％。
  オーバーフロー：非表示;
}

06.テキストをスタイル

Mo.js: Step 06 — （イメージクレジット：Pexels / Frank Kagumba）

テキストは、現在左上隅に表示されているように、ページの中央にレンダリングするようにスタイルされています。テキストを集中化するために、絶対位置を選択し、上、左右のマージンを使用して正確な位置決めを設定します。テキストはtext-transformプロパティを使用して変換されます。 Text-Alignプロパティも中央に設定されています。

テキスト{
  フォントファミリー：世紀ゴシック様式、Sans-Serif。
  カラー：#FFF;
  text-transform：大文字
  フォントサイズ：50px;
  フォントウェイト：ボルダー;
  位置：絶対;
  上：50px;
 左：25％。
 右：30％。
  テキスト整列：中央;
     }

07. MO.JSをインストールします

他のライブラリと同様に、MO.JSは複数のオプションを介してインストールされています。採用している最も簡単な方法は、CDNサーバーから直接アクセスしています。本文セクションに次のコードを追加します。

＆lt; script src = '//cdn.jsdelivr.net
MOJS / 0.265.6 / MO.MIN.JS '＆gt; / script＆gt;

OFFラインを開発している場合は、図書館が GitHubから直接ダウンロード適切なコマンドを使用して、BowerまたはNPMパッケージを使用してインストールします。

 Bower Install MO-JS.
NPM MO-JSをインストールします

ダウンロードされると、直接参照できます。

＆lt; script src = "mo.js" type = "テキスト
JavaScript "＆gt; / script＆gt;

最後に、新しいScript.jsファイルを作成してJSフォルダに保存します。このファイルにJavaScript機能を追加します。次のように本体セクションにリンクしてください。以下のようにテキストのタイトルの下に置きます。

08.最初のBlastを作成します

コードの開発に進む前に、作成しているものを強調するのは賢明です。何かを爆破するために単に爆発的な方法で小さなビットに分割することを意味すること。単純なオブジェクト（丸）を作成し、ユーザーがクリックしたときにそれが爆発的な方法で分割されます。

09.サークルオブジェクトを作成します

Mo.js: Step 09 — （イメージクレジット：Pexels / Frank Kagumba）

まず、ブラストされるオブジェクトを作成（丸）する。ただし、MO.JSは、長方形（rect）、十字、等しい、ジグザグ、ポリゴンを含む他の形状をサポートしています。 Shape Typeの指定に失敗した場合は、デフォルトはcircleです。単純な円を作成するには、varまたはconstを使用してそれを宣言し、その属性関数を呼び出して属性を割り当てます。

 //単純なオブジェクトを作成します
conc =新しいMOJS.Shape（{
  IsShowStart：true、
             半径：100、
}）;）

コードは与えられた半径を持つデフォルトの円オブジェクトを作成します。 ISShowStart変数には、オブジェクトを表示する必要があるかどうかを指定するためのブール値が割り当てられています。ページの中央に小さなマゼンタ色の円を表示するようにコードをレンダリングします。

10.サークルをアニメートします

コードスニペットは、スケールと不透明度が1から0に変わることを指定し、オブジェクトが消えていることを示します。アニメーションの認可と遅延も設定されています。初期化していないので、アニメーションは再生されません。これを行うには、以下の関数を追加してください。

 document.addeventListener（ 'click'、関数
（e）{
Circ。
 再生（）;
}）

11.爆発ポリゴンを作る

Mo.js: Step 11 — （イメージクレジット：Pexels / Frank Kagumba）

円がアニメートしているので、同時にレンダリングするBlastアニメーションを作成します。最初の爆風はポリゴン形状を使用して爆発を引き出す。 BLASTを作成するには、以下のコードスニペットに示すようにMO.JS関数バーストを使用してください。

 const burst1 =新しいMOJS.Burst（{
  左：0、上：0、
  数：7、
  半径：{50：250}、
  子供達： {
    記入：「白」、
    形状：「ポリゴン」、
    ストローク：{'white'： '＃A50710'}、
    StrokeWidth：4、
    半径： 'Rand（30,60）'、
    半径：0、
    スケール：{1：0}、
    パススケール： 'rand（.5,1）'、
    学位：360、
    ISFORCE3D：TRUE}}）;

コードは7つの多角形図形を爆発に割り当て、2つの半径を指定します。最初のアニメーションはアニメーション全体を表しますが、2番目のアニメーション内の特定のポリゴンオブジェクトに焦点を当てます。マウスクリックに応答するように、イベントリスナ機能にバーストを追加してください。 2つの新しいパラメータが追加されていることに注意してください。曲と生成。 Tuneは、吹き付けをページ内のどこにでもレンダリングするようになりますが、Vurst Animationを初期化します。ページをレンダリングします。円と同時に現れる爆発要素を守ります。

 document.addeventListener（ 'click'、関数
（e）{
             バースト1。
  Tune（{x：e.pagex、y：e.pagey}）。
  生む （）。
 再生（）;
Circ。
 再生（）;
}）;）

12. 2番目の爆発を作成します

Mo.js: Step 12 — （イメージクレジット：Pexels / Frank Kagumba）

次に、異なる形状オプションを使用して2番目のブラストを作成します。コードは前のBlastの構造に従い、いくつかのパラメータを変更します。

 const burst2 = new mojs.burst（{
  トップ：0、左：0、
  カウント：4、
  半径：{0：250}、
子供達： {
    形状：[「サークル」、「ret」]、
    ポイント：5、
    塗りつぶし：[「白」、
    半径： 'Rand（30,60）'、
    遅延： 'stagger（50）'、
    緩和：['Cubic.out'、 'cubic.out'、
'cubic.out']、
    スケール：{1：0}、
    パススケール： 'rand（.5,1）'、
    ISFORCE3D：TRUE}}）;

バーストをイベントリスナー関数に追加します。

 document.addeventListener（ 'click'、関数
（e）{
             バースト1。
  Tune（{x：e.pagex、y：e.pagey}）。
  生む （）。
 再生（）;
             バースト2。
             Tune（{x：e.pagex、y：e.pagey）
}）。
             生む（）。
             再生（）;
Circ。
 再生（）;
}）;）

13.サークル爆発を追加します

アニメーションをさらに強化するために、循環爆発を追加します。ステップ11および12においてコードを調べることは、2つのタイプのバースト間に存在する多くの類似点を明らかにする。 3番目の爆発を作成する際には、3つの点（...）として書かれているスプレッド演算子を使用してコードが多すぎることを避けます。ただし、まず、再利用したい類似の機能を含む変数を宣言します。その後、スプレッドオペレータを使用して他の2つの円を作成することができる。

 //類似の変数を作成します
パラメーター
    const circle_opts = {
  左：0、上：0、
   記入：「白」、
  スケール：{.2：1}、
  不透明度：{1：0}、
  ISFORCE3D：TRUE、
  Isshowend：False
;;

コードは、塗りつぶしタイプ、スケール、不透明度、およびアニメーションの最後に表示するかどうかを指定します。 2つのサークルアニメーションは次のように作成されます。

 const circle1 =新しいMOJS.Shape（{
  ... circle_opts、
  半径：200}）;
const circle2 =新しいMOJS.Shape（{
  ... circle_opts、
  半径：240、
  緩和：「キュービック。」、
  遅延：300}）;

円形を追加します。

 document.addeventListener（ 'click'、関数
（e）{
             バースト1。
  Tune（{x：e.pagex、y：e.pagey}）。
  生む （）。
 再生（）;
             バースト2。
             Tune（{x：e.pagex、y：e.pagey）
}）。
             生む（）。
             再生（）;
Circ。
 再生（）;
}）;）

14.基本的なバブルをレンダリングします

オブジェクトを小さなピースに分割するBlastアニメーションとは異なり、一方、バブルアニメーションはクリックしたオブジェクトをより大きなスペースに変換します。この概念は、オブジェクトが継続的にサイズ拡大するバルーンを吹き上げるという類推を採用しています。これを行うには、新しい変数のオープンバケーショングラウンドを作成し、バックグラウンド全体をオブジェクトに同様の色を実現するようにする属性を割り当てます。その結果、これはバブリングのニュアンスを生み出します。

 const openbackground = new mojs.shape（{
  記入： '＃fc2d79'、
  左：0、上：0、
  スケール：{0：4.5}、
  IsShowStart：true、
  半径：15、
  ISFORCE3D：TRUE、
  イスティメリネレス：TRUE、
遅延：150、
  半径：200、
  緩和：「キュービック。」、
  後退： 'expo.in'、}）;

バックグラウンド変数をイベントリスナー関数に追加してください。

オープンバックグラウンド。
  Tune（{x：e.pagex、y：e.pagey}）。
  再生（）;

15.複数の図形を追加します

ステップ14の概念に続いて、我々は今、複数の色付きの循環オブジェクトを含むように例を進め、それは同様の方法で展開され、いくつかのテキストを表示する。既存のHTMLファイルを編集して、ボディ内のコードをコピーします。ページの基本構造を作成します。

16.ヘルパーライブラリを追加します

次に、オブジェクトがクリックされたときにサウンドを作成してサウンドを生成するために、いくつかの追加のライブラリが本文セクションに追加されます。

＆lt; script src = 'https：//cdnjs.cloudflare.com
Ajax / libs / howler / 1.1.26 / howler.min.js '＆gt;
スクリプト＆gt;
＆lt; script src = 'https：//cdn.jsdelivr.net
MOJS / 0.119.0 / mo.min.js '＆gt;＆lt; / script＆gt;
＆lt; script src = 'https：//cdn.jsdelivr.net
HAMMERJS / 2.0.4 / hammer.min.js '＆lt; / script＆gt;
＆lt; script src = 'https：//cdnjs.cloudflare.com
Ajax / libs / iscroll / 5.1.1 / iscroll-probe.min
JS '＆GT;
＆lt;＆script＆gt。

17.アニメーションを進めなさい

次に、HTMLファイルで強調表示されている個々のクラスのスタイルを追加します。その後、MO.JS機能が追加されます。フルコード（CSSとJS）はレビュー用のチュートリアルファイルと共有されています。

Mo.jsについてもっと詳しく

チュートリアルはバブルとブラストのテクニックを示していますが、ラーニングプロセスを高速に追跡するのに役立ちます。これらのいくつかは含まれます githubのMO.JSチュートリアルそして Githubでもデモス。

この記事はもともとCreative Web Design Magazineの第291号に掲載されました ウェブデザイナー 。 問題291を購入する 。

続きを読む：

CSS芸術は古いブラウザによって見事に台無しにされます
ユーザーテストソフトウェアの最良の部分
素晴らしいUIデザイン

MO.JSライブラリでアニメートする方法

MO.JSがどのように役立つことができますか？

01.はじめに

02.ページ構造を作成します

03.ページを構成します

04. CSSをリンクします

05.背景をスタイル

06.テキストをスタイル

07. MO.JSをインストールします

08.最初のBlastを作成します

09.サークルオブジェクトを作成します

10.サークルをアニメートします

11.爆発ポリゴンを作る

12. 2番目の爆発を作成します

13.サークル爆発を追加します

14.基本的なバブルをレンダリングします

15.複数の図形を追加します

16.ヘルパーライブラリを追加します

17.アニメーションを進めなさい

Mo.jsについてもっと詳しく

操作方法 - 最も人気のある記事

Mayaでのブレンド形状作成を簡素化する方法

Adobe Frescoチュートリアル：絵画アプリで肖像画を作成する

画像を圧縮する方法：Webデザイナガイド

自然言語処理を理解する

イラストレーターにアプリアイコンを作成する方法

ビデオゲームのためのプレイ可能なアバターを設計する

Photoshopのテンプレートからポスターを作る

タイポグラフィのスタイルと実体を発見する

カテゴリ