jQuery

文字などを流れるニュースティッカー風に表示するjQuery-liScroll使い方

ticker

今回は、jQueryプラグイン【liScroll】を利用して、文字などをニュースティッカーを実装してみたいと思います。
ニュース系のサイトや電光掲示板なんかでもティッカーはよく見る表示方法で、少ない領域でより多くの情報をユーザーに伝えることが出来ます。
また、右から左への文字が動きますので、ユーザーの目に止まりやすいです。

ティッカーとは、

ティッカーとは、特定範囲内に文字列を流して表示させる表示方式のことである。右から左(あるいは上から下へ)文字が次々に流れてゆくのを読ませる方式であるので、限られた狭い領域で多くの情報を表示することができる。
ティッカーの代表的な例としては、新幹線の車内や看板、証券取引所などにある電光掲示板がある。Webページにおいても、左右に文字の流れるティッカー表示が用いられる場合が珍しくない。

こちらのjQueryプラグイン【liScroll】を利用して、WordPressの更新情報や新着情報を流すのもいいかもしれません。

実際に【liScroll】を使ったデモサイトも用意しましたので、参考頂ければと思います。

デモサイト

実際にこちらのプラグインを利用する場合は、下記より必要ファイルなどをダウンロードして下さい。

liScroll

ニュースティッカー 使い方

それでは、実際に【liScroll】の使い方を説明していきたいと思います。
実装をする前に上記のliScrollから必要なファイルをダウンロードして下さい。

必要ファイルの読み込み

まずは、jQuery本体と上記でダウンロードしました【jquery.li-scroller.1.0.js】をhead要素内に読み込みます。
下記のファイルの階層などは、ご自身の環境に合わせて下さい。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" ></script>
<script src="js/jquery.li-scroller.1.0.js"></script>

HTML

次にHTMLの記載をしていきたいと思います。
下記コードのようにul要素にIDを付加してきます。

<ul id="telop-2">
    <li><span>2015/02/09</span><a href="#">新着ニュース</a></li>
    <li><span>2015/02/09</span><a href="#">新着ニュース【2】</a></li>
    <li><span>2015/02/09</span><a href="#">新着ニュース【3】</a></li>
    <li><span>2015/02/09</span><a href="#">新着ニュース【4】</a></li>
    <li><span>2015/02/09</span><a href="#">新着ニュース【5】</a></li>
</ul>

CSS

次にCSSを記載していくのですが、【.tickercontainerと.tickercontainer .mask】の【width】は、設置する場所の幅に合わせて修正して下さい。

/*************************
liScroll styles
*************************/
.tickercontainer { 
border: 1px solid #000;
background: #fff; 
width: 958px; /**設置する場所の幅に合わせる**/
height: 27px; 
margin: 0; 
padding: 0;
overflow: hidden; 
}
.tickercontainer .mask {
position: relative;
left: 10px;
top: 8px;
width: 940px; /**設置する場所の幅に合わせる**/
overflow: hidden;
}
ul.newsticker { /* that's your list */
position: relative;
left: 750px;
font: bold 10px Verdana;
list-style-type: none;
margin: 0;
padding: 0;

}
ul.newsticker li {
float: left; 
margin: 0;
padding: 0;
background: #fff;
}
ul.newsticker a {
white-space: nowrap;
padding: 0;
color: #ff0000;
font: bold 10px Verdana;
margin: 0 30px 0 0;
} 
ul.newsticker span {
margin: 0 10px 0 0;
}

JavaScript

最後にul要素のID名を指定します。

<script>
$(function(){
	$("ul#telop").liScroll({travelocity: 0.15});
</script>

上記まで記載すれば、ニュースティッカーが表示されているはずです。
実際に【liScroll】を使ったデモサイトも用意しましたので、参考頂ければと思います。

デモサイト

また、下記のニュースティッカーを実装出来るjQueryプラグインもおすすめです。

こちらの記事をシェアする

こちらの記事があなたのお役にたちましたら、シェアしていただけますと大変嬉しく今後のブログ更新の糧となりますのでどうぞよろしくお願いします。(^^♪

About

Glow-Facotryでは、無料・有料のWPテーマを配布・販売サイトです。また、Web関連やWPの記事・日常的(ゲームも)なことをブログを利用して発信して行きたいと思っております。
よかったら下記のフォローをお気軽にお願いします。

関連記事

コメント

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

PREVIOUS post-title-mozi

WordPressの投稿画面タイトルに文字数カウンタを表示するカスタマイズ

NEXT toolbar-0

【初心者記事】WordPressの管理ツールバーを非表示にする方法