アスキーアートをアニメーションさせるJQuery Plugin 『jquery-asciimation』
Pocket

以前にこちらでも紹介した、telnetでアクセスするStarwarsのアスキーアートのムービー。実は、Webページからも閲覧する事が出来る。
このWebページのように、アスキーアートをアニメーションさせるJQuery Pluginが『jquery-asciimation』だ。

20150402-000000

 

こちらにサンプルページが用意されているので、まずはそちらから参照してもらいたい。
地球のアスキーアートがくるくる回っているのがわかると思う。これと同じような事が、このプラグインを用いる事で行える。

Sponsored Links

それでは、設定は難しいのか?と思うと、結構簡単。
サンプルページのソースコードや、こちらのページのHTMLファイルの記述を見るとわかるのだが、ただHTMLファイル上で、アスキーアートを上から順に羅列しているだけだ。

●サンプルHTML

  <!-- this is the animation container -->
  <div id="animation"></div>

  <!-- these are some frames -->
  <span class="frame">--</span>    <!--1個目のAA-->
  <span class="frame">/</span>     <!--2個目のAA-->
  <span class="frame">|</span>     <!--3個目のAA-->
  <span class="frame">\</span>     <!--4個目のAA-->

 

個人的には、やる夫スレなんかをこれでアニメーション化したら面白いのではないか?と思うが、どうなんだろうか。

Pocket

Written by blacknon

インフラ系のSE。一時期はプログラマ。 仮想化とオープンソースに興味あり。一日中寝てたい今日このごろ。 スペインとかで働きたいなぁ…(シエスタがあるので)

Leave a Comment

メールアドレスが公開されることはありません。