jQueryを利用してシンプルなティッカーを作る
2014.08.25 Posted by Coding_team
こんにちは。ウェブラボ技術メモ第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
使用用途や、好みの動きに合わせて設置してみるのも良いと思います。
以上、ウェブラボ技術メモでした。
関連記事こちらの記事も合わせてどうぞ。
SGE普及でSEOやWebサイトの価値はどう変わる?制作会社のメンバーにも聞いてみた!
2024.05.23
2023.09.07