少し古いですが、jQuery プラグインjwise.jsを使って、テキストをアニメーション効果で切り替えて、表示します。下側の青いボタンをクリックすると、それぞれ違うパターンのアニメーション効果で、黒字の部分に用意したテキスト(このサンプルでは9種類)をランダムに連続で表示します。[Stop]ボタンクリックで停止します。もともと欧文を使うことを想定して作られているようで、日本語ではうまく伸び縮みしません。そのため、単語と単語の間に半角の空白を入れるなどして欧文風の動きに近づけています。
アニメーション効果の各種設定(効果のインアウトの時間、次の表示までの時間、文字の間隔、最小文字サイズ、最大文字サイズ、最初の色、最後の色 等)は、button要素にインラインで記載したスクリプトのパラメータを書き換えて変更できます(ソース1)。
アニメーションさせるテキストは、div要素で囲み、その親要素のdivにクラスを付けて、head要素に記載したスクリプトの「animLines:」でそのクラスを指定します(ソース2)。また、リンクを付けることも可能ですが、個別にCSSを設定して 色を合わせる必要があるため、このサンプルでは省いています。
<button onClick="testanim(700, 3000, '0px', '0px', '16px', '16px', '#000', '#fff', 'left', '0', '1'); return false;">normal</button>
function testanim(a, b, c, d, e, f, g, h, i, j, k){ $('.animContainer').jwise({ animLines: '.animLines', //親要素divのクラス指定 ---中略--- fadeMin: j, fadeMax: k }); }