公開日:2015/03/31JavaScript面白programmingtwitterFacebookgoogle+はてなtfgは普通にWebサイトを閲覧する人は、HTMLコードを見る機会は少ないと思います。今回ご紹介する「Dom-Animator.js」を使う場合、ブラウザのデベロッパーツールなどでHTMLコードを見ないと、何が起きたかまったく分からないという面白いライブラリです。どんなことが出来るのか?まずは、「Dom-Animator.js」を使うとどんな事が出来るのかを見てみましょう!公式サイトへアクセスすると、ブラウザのデベロッパーツールを開くように明記されています。(参考)Macは、「Command」+「Option」+「I」Windowsは、「Control」+「Shift」+「I」で、デベロッパーツールが開きます。そこで、そのまま開いてみると、コード内にひときわ目立つ「アスキーアート」がアニメーションしているのが分かります!分かりやすいように、GIFにしてみました。このように、HTMLコード内で自分の好きな「アニメーション」を埋め込めるだけのマニアックなライブラリなんです...。誰かが、自分のHTMLコードを開いた時に、アニメーションが表示されて驚く様子を想像して楽しめる方のみ、トライしてみてください。使い方!使い方ですが、意外とシンプルな構造になっています。DomAnimator();そして、表示させたいアスキーアートを設定!domAnimator.addFrame('o_o');domAnimator.addFrame('-_o');ここでは、2つのアスキーアートを交互にアニメーションさせて、ウィンクをしているように見せてます。最後に、アニメーションの実行。domAnimator.animate();これで完了です!ソースの全体はコチラ。domAnimator.addFrame(frame1);他にも、たくさんのオプションが用意されているので、ご興味ある方は挑戦してみてください。