3/3 数秒ごとに1行ずつ縦スクロールするティッカーを作る [ホームページ作成] All About

vTickerのオプションの書き方

vTickerのオプションは、前ページの解説「3」で記述した、vTickerを実行する以下のJavaScript(jQuery)ソース内に追記することで指定できます。

<script type="text/javascript">
$(function() {
  $('#example').vTicker({
    ～～～ ここにオプションを記述 ～～～
  });
});
</script>

上記の「～～～ここにオプションを記述～～～」の部分に、以下で解説する各種オプションを列挙します。

vTickerオプションの記述例

オプションを詳しく解説する前に、記述例をご紹介しておきます。以下は、3つのオプションを指定した例です。複数のオプションを記述する場合は、半角カンマ記号「,」で区切る必要がある点に注意して下さい。

<script type="text/javascript">
$(function() {
  $('#example').vTicker({
    speed: 1000,
    pause: 2000,
    showItems: 2
  });
});
</script>

上記のように記述すると、ティッカーが入れ替わる速度が遅くなり(1秒)、1つの項目が表示されている時間(停止している時間)が短くなり(2秒)、1回に表示する行数が2行になります。これらのオプションの意味については、以下で詳しくご紹介致します。

■ティッカーが入れ替わる速度：

speed: 700

今表示されている内容と、次の内容とが入れ替わるのにかかる時間を、ミリ秒で指定します。「1000」を指定すれば、1秒間かけて入れ替わるようになります。デフォルトでは、700(＝0.7秒)です。

■1つの項目が表示されている時間(停止している時間)：

pause: 4000

ティッカーが入れ替わってから、次の項目に入れ替わるまでの時間(＝停止している時間)をミリ秒で指定します。値を「0」にすると、ほんの一瞬だけ止まってすぐに次の項目に切り替わります。デフォルトでは、4000(＝4秒)です。

■1度に表示する行数(項目数)：

showItems: 1

1度に何個の項目を表示するかを指定します。項目が3つ「A」→「B」→「C」の順に並んでいるとき、このオプションで値「2」を指定すると、最初は「A・B」が表示され、次に1行分だけ迫り上がって「B・C」が表示され、次に「C・A」が表示され……のようにループします。デフォルトでは「1」です。

■マウスが載っている間はティッカーの更新を停止するかどうか：

mousePause: true

ここに値「true」を指定しておくと、ティッカーの上にマウスポインタが載っている間は、ティッカーが停止します。マウスポインタが離れると、再度動き始めます。ティッカーで表示する文字列をリンクにしている場合など、ユーザが操作するよりも前に表示が更新されてしまうと困る場合に利用すると良いでしょう。値を「false」にすると、マウスポインタが載っても停止しません。デフォルトは、「true」です。

■スライドアニメーション効果を使って項目を切り替えるかどうか：

animate: true

ここに値「true」を指定すると、「現在の表示」から「次の表示」に切り替わる際に、垂直方向に(下から上へ向かって)スライドするアニメーション効果が使われます。「false」を指定すると、アニメーション効果はなく、一瞬で切り替わります。デフォルトは、「true」です。

■ティッカー表示領域の高さ：

height: 0

ティッカーを表示する領域(ボックス)の高さをピクセル数で指定します。この記述を省略するか、または「0」を指定すると、必要な高さが自動的に確保されます。

■ティッカー1項目のマージン量：

margin: 0

各項目(li要素)のマージン量(外側の余白量)を指定できます。マージンは、スクリプト側で設定されるため、CSSで指定していても無視されてしまいます。装飾上の都合でマージンを加えたい場合は、このオプションで指定します。デフォルトは、「0」です。

■ティッカー1項目のパディング量：

padding: 0

各項目(li要素)のパディング量(内側の余白量)を指定できます。パディングも、スクリプト側で設定されるため、CSSで指定していても無視されてしまいます。装飾上の都合でパディングを加えたい場合は、このオプションで指定します。デフォルトは、「0」です。

■ティッカーを停止した状態で始める：

startPaused: false

ここに値「true」を指定すると、ティッカーが最初は停止した状態で表示されます。ティッカーの開始タイミングを、自分で記述したスクリプトで決定したい場合に利用します。「true」を指定すれば、読込完了直後から自動的に動き出します。デフォルトは、「true」です。

これらのオプションを自由に組み合わせて指定できます。

今回は、指定した行単位で、「数秒間は静止」→「縦方向にスクロールするアニメーションで次の1行を表示」……といった表示を繰り返す「ティッカー」が簡単に作れるスクリプト「vTicker」の使い方をご紹介致しました。ぜひ、試してみて下さい。

【関連記事】