Eyes, JAPAN Blog > え!?どこに使うの?なDom-Animator.jsのご紹介

え!?どこに使うの?なDom-Animator.jsのご紹介

Yuta Sakaguchi

この記事は1年以上前に書かれたもので、内容が古い可能性がありますのでご注意ください。

こんにちは!アルバイトスタッフの坂口です。
本日はDom-Animator.jsというライブラリのご紹介をします。
ぱっと名前だけではなんとなく、フロントエンドでのアニメーションを簡単に用意出来たりするのかなぁと思いますが実は全然違います!!!!

スクリーンショット 2016-07-11 18.51.25

そ、そんなとこでアニメーション!?

このDom-Animator.js
実はソースコードの中でアニメーションを実現させるんです!

と言っても手元でコーディングしているところにアニメーションをさせるのではなく、
ブラウザーに搭載されているデベロッパーツールなどでソースコードのを見た際にアニメーションが見ることができるようになっています。(Google ChromeとFirefoxで動作確認してます)

とりあえず”Eyes, JAPAN”をアニメーションさせてみました!

コードはこんな感じとなっています。

スクリーンショット 2016-07-11 18.52.31

アニメーションしたい内容をaddFrame()を利用して追加していきます。
今回のように配列でアスキーアートのようなものを渡すこともできますし、ただの文字列を渡すことも可能です。

アニメーションしたい内容がすべてaddできましたら、animate()でアニメーションを開始します。
ここの引数(ミリ秒)に合わせてアニメーションをしていきます。

そして”Eyes, JAPAN”とアニメーションさせたのがこちらとなります。

dom-animator

 

まとめ

業務などでは使いづらいかもしれませんが、個人のホームページなどで利用すると面白いかもしれません。
僕も自身のサイトを作りなおそうと思っていますので使おうかなと思います。
ぜひみなさんも使ってみてください。

Comments are closed.