HTMLコード内でアニメーションする超マニアックなJSライブラリ「Dom-Animator.js」

公開日：2015/03/31

普通にWebサイトを閲覧する人は、HTMLコードを見る機会は少ないと思います。

しかし、今回ご紹介する「Dom-Animator.js」を使う場合、ブラウザのデベロッパーツールなどでHTMLコードを見ないと、何が起きたかまったく分からないという面白いライブラリです。

どんなことが出来るのか？

まずは、「Dom-Animator.js」を使うとどんな事が出来るのかを見てみましょう！

公式サイトへアクセスすると、ブラウザのデベロッパーツールを開くように明記されています。

（参考）
Macは、「Command」+「Option」+「I」
Windowsは、「Control」+「Shift」+「I」
で、デベロッパーツールが開きます。

　
そこで、そのまま開いてみると、コード内にひときわ目立つ「アスキーアート」がアニメーションしているのが分かります！

　
分かりやすいように、GIFにしてみました。

このように、HTMLコード内で自分の好きな「アニメーション」を埋め込めるだけのマニアックなライブラリなんです…。

誰かが、自分のHTMLコードを開いた時に、アニメーションが表示されて驚く様子を想像して楽しめる方のみ、トライしてみてください。

使い方！

使い方ですが、意外とシンプルな構造になっています。

まず、「head」要素内に「Dom-Animator.js」を追加します！

1
2
3

<head>
  <script src="js/dom-animator.js"></script>
</head>

　
これだけで、準備は完了です！

あとは、「script」要素内でインスタンスを作成して、表示させたいアニメーションを設定するだけです！

　
まず、インスタンスの作成！

var domAnimator = new DomAnimator();

　
そして、表示させたいアスキーアートを設定！

domAnimator.addFrame('o_o');
domAnimator.addFrame('-_o');

ここでは、2つのアスキーアートを交互にアニメーションさせて、ウィンクをしているように見せてます。

　
最後に、アニメーションの実行。

domAnimator.animate();

これで完了です！

　
ソースの全体はコチラ。

<script>
  var domAnimator = new DomAnimator();
  domAnimator.addFrame('o_o');
  domAnimator.addFrame('-_o');
  domAnimator.animate();
</script>

簡単ですね！

　
ちなみに、アスキーアートは配列で用意することも可能です！

var frame1 = [
		'       .-"-.       ',
		'     _/_-.-_\\_     ',
		'    /|( o o )|\\    ',
		'   | //  "  \\\\ |   ',
		"  / / \\'---'/ \\ \\  ",
		'  \\ \\_/`"""`\\_/ /  ',
		'   \\           /   ',      
		'    \\         /    ',
		'     |   .   |     ']
　
		domAnimator.addFrame(frame1);

　
他にも、たくさんのオプションが用意されているので、ご興味ある方は挑戦してみてください。

（参考）
「Dom-Animator.js」公式サイト

うえぶまなぶ