例によってhtmlテンプレートの最後の方に以下のようなスクリプトを挿入します。

<script type="text/javascript">
<!--
var gBaseText = new Array();
var gAnimPart = new Array();
var gAnimSpan = new Array();
var gAnimTime = new Array();
function StopTextAnim() {
  for (i in gBaseText) window.clearTimeout(gAnimTime[i]);
  return(false);
}
function TextAnim(tagName,clsName,animNum) {
  var objAnim = this.document.getElementsByTagName(tagName);
  for (i=0;i<objAnim.length;i++) {
    if (objAnim[i].className == clsName) objAnim[i].firstChild.nodeValue = Array(gBaseText[clsName],gAnimPart[clsName][animNum]).join('');
  }
  if ( objAnim.length > 0 ) {
    var nxtTime = gAnimSpan[clsName][animNum];
    animNum = (animNum < (gAnimPart[clsName].length - 1) ) ? parseFloat(animNum) + 1 : 0;
    var argFunc = Array("TextAnim('",tagName,"','",clsName,"','",animNum,"')").join('');
    gAnimTime[clsName] = window.setTimeout(argFunc,nxtTime);
  }
}
function InitTextAnim() {
  // 物陰から……
  gBaseText['watch'] = '┬┴┬┴┤';
  gAnimPart['watch'] = Array('!',')','￣)','￣)きら〜ん','☆)きら〜ん','￣)きら〜ん','￣)',')','');
  gAnimSpan['watch'] = Array(1000,500,1000 ,500,100,500,1000,500,5000);
  // きょろきょろ
  gBaseText['look4'] = '';
  gAnimPart['look4'] = Array('(.. )', '( ..)','(.. )','( ..)','(.. )','(..;)','( ..)');
  gAnimSpan['look4'] = Array(1000,1000,1000,1000,1000,1000,1000);
  // アニメーション開始
  for (i in gBaseText) TextAnim('span',i,0);
}
InitTextAnim(); // テキストアニメーション
// -->
</script>

これが下準備です。これで記事の方にアニメーション顔文字を入れる準備ができました。

実際の記事には

<span class="watch" style="font-family:monospace;">┬┴┬┴┤￣)</span>
<span class="look4" style="font-family:monospace;">(.. )( ..)</span>
<a href="#" onclick="StopTextAnim();return(false);" onkeypress="StopTextAnim();return(false);">[止める]</a>

のように記述します。

[止める]は必須ではありませんが、アニメーションがうるさいと思う人もいると思いますので、できるだけ併記した方が良いでしょう。

記事中ではなくてhtmlテンプレートに入れてしまっても良いかもしれません。なお、[止める]はそのページ内にある全てのアニメーション顔文字の動作を止めます。

また、アニメーション顔文字はそれぞれ単独で利用できます。「物陰から」だけ利用したいという場合は、

<span class="watch" style="font-family:monospace;">┬┴┬┴┤￣)</span>

を単独で記述して下さい。

<span class="watch" style="font-family:monospace;">┬┴┬┴┤￣)</span>
<span class="watch" style="font-family:monospace;">┬┴┬┴┤￣)</span>

のように複数あっても構いません。ちょっと間抜けかもしれませんけど。

上記のスクリプトはアニメーション顔文字のバリエーションは二つだけですが、設定を追加することで増やすことができます。

「乾杯」というアニメーションを追加したいという場合、まず、顔文字の記述を考えます。例えば、以下のような感じ。

<span class="cheers" style="font-family:monospace;">( ^^)／□☆□＼(^^ )</span>

JavaScript未対応な環境でも同等の情報を提供するために( ^^)／□☆□＼(^^ )を記述します。

それを<span>要素で囲んで、適当なクラスを付けます。ここではcheersというクラスにしました。style属性は必須ではありませんが、アニメーションの際は等幅フォントの方が都合が良いので、一応付けておきます。

続いてアニメーションの設定を考えます。上記のスクリプトでは、

  // 物陰から……
  gBaseText['watch'] = '┬┴┬┴┤';
  gAnimPart['watch'] = Array('!',')','￣)','￣)きら〜ん','☆)きら〜ん','￣)きら〜ん','￣)',')','');
  gAnimSpan['watch'] = Array(1000,500,1000 ,500,100,500,1000,500,5000);
  // きょろきょろ
  gBaseText['look4'] = '';
  gAnimPart['look4'] = Array('(.. )', '( ..)','(.. )','( ..)','(.. )','(..;)','( ..)');
  gAnimSpan['look4'] = Array(1000,1000,1000,1000,1000,1000,1000);

の部分がアニメーションの設定になります。

ここでgBaseTextは常に固定的に表示される部分、gAnimPartがアニメーションのパターン、gAnimSpanがアニメーションタイミング(それぞれのパターンを表示する時間)を設定しています。['']内は先程決めたクラス名が入ります。

gAnimSpanは数値で設定しますが、これは目安としては1000で1秒と思って下さい。環境によってはこれよりも遅くなったりします。

乾杯というアニメーション顔文字を次のような感じにしてみました。

  gBaseText['cheers'] = '( ^^)／[□';
  gAnimPart['cheers'] = Array('　　□]＼(^^ )', '　□]＼(^^ )','□]＼(^^ )','☆□]＼(^^ )','　□]＼(^^ )');
  gAnimSpan['cheers'] = Array(2000,500,500,200,1000);

これを上記のアニメーション設定に追記します。つまり以下のようになります。

  // 物陰から……
  gBaseText['watch'] = '┬┴┬┴┤';
  gAnimPart['watch'] = Array('!',')','￣)','￣)きら〜ん','☆)きら〜ん','￣)きら〜ん','￣)',')','');
  gAnimSpan['watch'] = Array(1000,500,1000 ,500,100,500,1000,500,5000);
  // きょろきょろ
  gBaseText['look4'] = '';
  gAnimPart['look4'] = Array('(.. )', '( ..)','(.. )','( ..)','(.. )','(..;)','( ..)');
  gAnimSpan['look4'] = Array(1000,1000,1000,1000,1000,1000,1000);
  // 乾杯
  gBaseText['cheers'] = '( ^^)／[□';
  gAnimPart['cheers'] = Array('　　□]＼(^^ )', '　□]＼(^^ )','□]＼(^^ )','☆□]＼(^^ )','　□]＼(^^ )');
  gAnimSpan['cheers'] = Array(2000,500,500,200,1000);