ここでは文字にタイピングアニメーショーンをつける jquery.jaticker.jsを紹介していきます。

デモはこちら
https://office-goto.info/demo/jaticker/

jatickerのダウンロード
http://www.otchy.net/javascript/jaticker/
otchy.net様

head内で読み込み

<link rel="stylesheet" type="text/css" href="jquery.jaticker_1.0.0.css" media="screen" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="jquery.jaticker_1.0.0.js"></script>

jquery.jaticker_1.0.0.css、jquery.jaticker_1.0.0.jsを読み込んでください。

script

$(function(){
    $('#jaticker').jaticker();
});

ターゲット指定してください。

html

<div id="jaticker">
    <ruby>緑の<rt>みどりの</rt></ruby><ruby>カバンに<rt>かばんに</rt></ruby><ruby>500万<rt>500まん</rt></ruby><ruby>入れて<rt>いれて</rt></ruby>
    <ruby>白の紙で<rt>しろのかみで</rt></ruby><ruby>黄色のカバン<rt>きいろのかばん</rt></ruby><ruby>言うて書いて<rt>いうてかいて</rt></ruby>
    <ruby>赤のカバン<rt>あかのかばん</rt></ruby><ruby>言いながら<rt>いいながら</rt></ruby><ruby>置いてくれたら<rt>おいてくれたら</rt></ruby>
    <ruby>俺黒のカバン<rt>おれくろのかばん</rt></ruby><ruby>言いながら<rt>いいながら</rt></ruby><ruby>取りに行くわ<rt>とりにいくわ</rt></ruby>
</div>

ルビを振ると変換している様なアニメーションがつきます。

カスタマイズ

jquery.jaticker_1.0.0.js (77～85行目)

opt: {
    'inputSpeed': 60,       // アニメーション速度
    'convertSpeed': 120,    // 変換アニメーション速度
    'autoStart': true,      // 自動的に開始するか
    'cursorStr': '|',       // カーソルの文字列
    'cursorInterval': 500,  // カーソルの点滅速度
    'hideCursor': false,    // カーソルを隠すか
    'leaveCursor': false    // アニメーション完了後カーソルを消すか
}

お好みにアニメーションをカスタマイズできます。