jQueryを利用してシンプルなティッカーを作る

こんにちは。ウェブラボ技術メモ第4回目です。

今回はjquery.simpleTicker.jsを使ってシンプルなニュースティッカーを作ってみたいと思います。

ティッカーとは…
特定範囲内に文字列を流して表示させる表示方式のことである。右から左(あるいは上から下へ)文字が次々に流れてゆくのを読ませる方式であるので、限られた狭い領域で多くの情報を表示することができる。

IT用語辞典より

新幹線の車内や看板、証券取引所などにある電光掲示板と言えば想像がつくと思います。

これをサイトに設置したいと思います。

今回はjQueryのプラグインを使用しますのでjquery.jsも一緒に読み込ませます。

■HTML head内

HTMLはリストを作るだけです。

さきほどheadで指定したid(#ticker-fade)を指定するのを忘れないようにしましょう。

■HTML

CSSはある程度自由に指定が出来ますが、シンプルに作成するデモでは下記のようにします。

■CSS

完成したデモはこちらです

いかがでしょうか。

ニュースティッカーを作成するプラグインとしては他にもこのようなプラグインがあります。

・フレキシブルな垂直型のニュースティッカー

jquery-advanced-news-ticker
・文字をタイプしているようなニュースティッカー
jQuery News Ticker

使用用途や、好みの動きに合わせて設置してみるのも良いと思います。

以上、ウェブラボ技術メモでした。
  • このページを共有する