jQueryプラグインtext-rotator.jsを使い、カンマ区切りのテキストをアニメーションエフェクト(fadeIn、bounce、zoomIn)付きで切り替えます。プラグインと指定のセレクター、クラスを設置すれば、後は切り替え用のテキストをカンマ区切りで並べていくだけで簡単に実装できます。
切り替えの時間やエフェクトは、外部ファイル「custom.js」のパラメーター「speed」で変更できます。また、テキストの色やサイズはCSSで変更できます。
<!-- HTMLソース -->
<div class="demo-rotate"> <h1>[fadeIn]<span class="posl12">主力製品:</span> <span class="rotate1"> 百万石 WEB受注システム,WEB受注システム PKI認証対応版,EDI連動型・百万石 購買システム</span> </h1> <h1>[bounce]無料で使える: <span class="rotate2"> 5→→→→→,→4→→→→,→→3→→→,→→→2→→,→→→→1→,→→→→→0万石 WEB受注システム,→→→→→→</span> </h1> <h1 style="font-size:22px;"> <span style="font-size:26px;">[zoomIn]</span> <span class="rotate3"> QRラリー カスタムパック, QRラリー ライトパック, QRラリー アプリ</span> で集客力アップ、地域の活性化! </h1> </div>