アニメーション：

文字列を一文字ずつタイピング表示(変換指定)

対象Node内で一文字ずつタイピングするように表示していくアニメーション。漢字などを表示する際に、変換前のひらがなを表示→漢字の表示に置き換えるという動きにも対応。

Node
Nodeを指定 id値を文字列で指定してもよい
Number
スピードを数値で渡す 1文字を表示するのにかかる秒数
String‥
表示する文字列を指定
  • ○変換後と変換前の文字列を2つの引数として指定：順番に注意
  • ○変換しない文字列の場合には、変換前の文字列の代わりに null を指定
  • ○複数セットある場合は繰り返して引数を指定：引数の数に制限はない
●必須引数 ●オプション引数(省略可能)

記述例

$aniTextTyping2($id('aNode'), 0.15, '文字列', 'もじれつ', 'をタイピング', null)
$aniTextTyping2('aNode', 0.2, '文字列', 'もじれつ', 'を', null, '変換', 'ヘンカン')

動作サンプル

【サンプルの条件設定】スピード＝0.15 ／ 指定文字列：もじれつをヘンカンしてひょうじする。 → 文字列を変換して表示する。

 
HTML : <div id="result1"></div>
Javascript : $aniTextTyping2($id('result1'),0.15,'文字列','もじれつ','を',null,'変換','ヘンカン','して',null,'表示','ひょうじ','する。',null);

【サンプルの条件設定】スピード＝0.2 ／ 指定文字列：もじれつをタイピング → 文字列をタイピング

 
HTML : <div id="result2"></div>
Javascript : $aniTextTyping2($id('result2'),0.2,'文字列','もじれつ','をタイピング',null);

【サンプルの条件設定】スピード＝0.25 ／ 指定文字列：馬で行くと書いて‥ → バイク

 
HTML : <div id="result3"></div>
Javascript : $aniTextTyping2('result3',0.25,'バイク','馬で行くと書いて‥');
※上記のサンプルコードは主にPC表示用を想定している。スマホ用のコーディングでは別途調整が必要となる可能性がある。
※この関数の動作サンプルとして必須ではない装飾的なCSSコードなどは省略して提示している。