jQueryプラグインtext-rotator.jsを使い、カンマ区切りのテキストをアニメーションエフェクト(fadeIn、bounce、zoomIn)付きで切り替えます。プラグインと指定のセレクター、クラスを設置すれば、後は切り替え用のテキストをカンマ区切りで並べていくだけで簡単に実装できます。

切り替えの時間やエフェクトは、外部ファイル「custom.js」のパラメーター「speed」で変更できます。また、テキストの色やサイズはCSSで変更できます。

[fadeIn]主力製品: 百万石 WEB受注システム,WEB受注システム PKI認証対応版,EDI連動型・百万石  購買システム

[bounce]無料で使える:5→→→→→,→4→→→→,→→3→→→,→→→2→→,→→→→1→,→→→→→0万石 WEB受注システム,→→→→→→

[zoomIn]  QRラリー カスタムパック, QRラリー ライトパック, QRラリー アプリ で集客力アップ、地域の活性化!

<!-- HTMLソース -->
<div class="demo-rotate"> <h1>[fadeIn]<span class="posl12">主力製品:</span> <span class="rotate1"> 百万石&nbsp;WEB受注システム,WEB受注システム&nbsp;PKI認証対応版,EDI連動型・百万石 &nbsp;購買システム</span> </h1> <h1>[bounce]無料で使える: <span class="rotate2"> 5→→→→→,→4→→→→,→→3→→→,→→→2→→,→→→→1→,→→→→→0万石&nbsp;WEB受注システム,→→→→→→</span> </h1> <h1 style="font-size:22px;"> <span style="font-size:26px;">[zoomIn]</span> <span class="rotate3"> &nbsp;QRラリー&nbsp;カスタムパック,&nbsp;QRラリー&nbsp;ライトパック,&nbsp;QRラリー&nbsp;アプリ</span>&nbsp;で集客力アップ、地域の活性化! </h1> </div>

 

※参照元:http://www.jqueryscript.net/animation/Simple-jQuery-Text-Rotator-with-CSS3-Animations.html
戻るボタン