少し古いですが、jQuery プラグインjwise.jsを使って、テキストをアニメーション効果で切り替えて、表示します。下側の青いボタンをクリックすると、それぞれ違うパターンのアニメーション効果で、黒字の部分に用意したテキスト(このサンプルでは9種類)をランダムに連続で表示します。[Stop]ボタンクリックで停止します。もともと欧文を使うことを想定して作られているようで、日本語ではうまく伸び縮みしません。そのため、単語と単語の間に半角の空白を入れるなどして欧文風の動きに近づけています。

アニメーション効果の各種設定(効果のインアウトの時間、次の表示までの時間、文字の間隔、最小文字サイズ、最大文字サイズ、最初の色、最後の色  等)は、button要素にインラインで記載したスクリプトのパラメータを書き換えて変更できます(ソース1)。

アニメーションさせるテキストは、div要素で囲み、その親要素のdivにクラスを付けて、head要素に記載したスクリプトの「animLines:」でそのクラスを指定します(ソース2)。また、リンクを付けることも可能ですが、個別にCSSを設定して 色を合わせる必要があるため、このサンプルでは省いています。

本当のコストダウンは 受注から! 百万石 WEB 受注システム
無料から使える BtoB WEB受注! 0万石 WEB 受注システム
クライアント証明書認証 に対応! BtoB WEB 受注システム・PKI認証対応版
無料で 在庫状態を 照会できる 0万石 在庫照会システム
既存のホストを 利用する EDI連動型 百万石 購買システム
配達指示と回収数報告を効率的に管理 定期配達・回収品管理システム
社内ネットを利用してラベル印刷 耐洗ラベルプリントシステム開発
バーコード・QRコード・RFID ハンディターミナルを活用したシステム開発
Conifer - Create System and Solution

ソース1

<button onClick="testanim(700, 3000, '0px', '0px', '16px', 
'16px', '#000', '#fff', 'left', '0', '1'); return false;">normal</button>

ソース2

function testanim(a, b, c, d, e, f, g, h, i, j, k){
	$('.animContainer').jwise({	
		animLines: '.animLines',    //親要素divのクラス指定
		---中略---
		fadeMin: j,
		fadeMax: k
	});
}
※引用、参考:http://havalite.com/?p=55
戻るボタン