WEBサイトを制作している時に新着情報やお知らせをニュースティッカーで表示したい場合があります。

今回はシンプルなニュースティッカーを簡単に実装することができるjQueryのプラグイン「jquery.simpleTicker.js」を使用してみたのでご紹介します。

シンプルにテキストを切り替えるだけであれば利用できそうです。
テキストを切り替える時のエフェクトは「fade」「roll」「slide」で指定できます。

「jquery.simpleTicker.js」の使用方法

下記のページから「Basic Table」をダウンロードします。

https://github.com/miraoto/jquery.simpleTicker.js

ファイル読込

jQueryとダウンロードした「jquery.simpleTicker.js」を読み込みます。
cssはサイトに合わせて変更します。

HTML

ニュースティッカーに使用するテキストのリストを作成します。
下記はdivに「id=”newsticker”」を指定しています。

JS

ニュースティッカーを行う要素を指定し、下記のコードを記述します。

上記、エフェクトにフェードを指定。
エフェクトを変える場合は「effectType」の箇所を「fade」「roll」「slide」のいずれかで変更します。

サンプル

実際に使用してみたサンプルがこちらです。
エフェクトごとに表示しています。

「jquery.simpleTicker.js」を使用したデモページ

まとめ

上記のように簡単に設置することが可能です。
ニュースティッカーでも色々なものがありますが、シンプルにテキストの入れ替えを行いたい時などには良いかと思います。