【jQuery】vTickerで垂直スクロールのティッカー作成

はじめに

「このwebサイトのように自動縦スライドをヘッダーに入れたい！」と、Google先生に尋ねまわったところ、jQuaryプラグイン「vTicker」で実装可能なことが判明。
あわせてこのような表示形式をティッカーと呼ぶことも判明（以下引用参照）。
さっそく設定してみました。

ティッカーとは 　

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

基本設定

vTickerをGithubから入手

こちらからzipファイルをダウンロード

jsの読み込み

<header>内にjqueryとjquery.vticker.jsを設定

<script src="./jquery-3.6.0.min.js"></script>
<script src="./jquery.vticker.js"></script>    

htmlにul要素を設定

スクロールさせる要素の親要素にclassまたはidを指定。

<div class="ticker">
  <ul>
    <li>サンプルサンプル</li>
    <li>さんぷるさんぷる</li>
  </ul>
</div>

vtickerのスクリプトを記述

ul要素で指定したclassまたはidに対してvtickerを記述すれば、基本設定は完了。
スクロールの回転速度、停止時間などはオプションで設定。

<script type="text/javascript">
$(function() {
   $('.ticker').vTicker();
});
</script>

vtickerオプション

以下参照

$('.ticker').vTicker({
 speed: 1000, // ティッカーが切り替わる速度
 pause: 2000, // ティッカーの表示（停止）時間
 showItems: 1, // ティッカーの表示行（項目）数
 animate: true, // スクロールアニメーションの動作有無（デフォルトはtrue）
 mousePause: false, // ポインターが乗っているときの動作有無（デフォルトはtrue）
 startPaused: false, // 自動開始の有無（デフォルトはtrue）
 height: 0, // 表示領域の高さ（指定なしと0はauto）
 margin: 0, // 表示領域のマージン量（cssでは設定不可）
 padding: 0 // 表示領域のパディング量（cssでは設定不可）
});

応用　―　他の要素と横並びで表示

htmlでスクロール項目の親要素に指定したclassまたはidに、cssでwidthを設定。
すると、一段上の親要素へのdisplay:flex設定により、他の要素と横並び表示することができました。
（vtickerオプションではwidthの設定不可）

サンプル

サンプルはこちら

html

<div class="sample">
  <div class="logo">SAMPLE</div>
  <div class="ticker">
    <ul>
      <li class="red">サンプルサンプル</li>
      <li class="green">サンプルサンプル</li>
      <li class="purple">サンプルサンプル</li>
      <li class="blue">サンプルサンプル</li>
    </ul>
  </div>
  <div class="search">
    <form action="cgi-bin/example.cgi" method="post">
      <input type="search" name="search" placeholder="キーワードを入力">
      <input type="submit" name="submit" value="検索">
    </form>
  </div>
</div>

css

.sample {
  display: flex;
  justify-content: space-between;
}
.ticker {
  width: 130px;
}
.red {
  color: red;
}
.green {
  color: green;
}
.purple {
  color: purple;
}
.blue {
  color: blue;
}

js

基本設定から変更なし

参考URL

数秒ごとに1行ずつ縦スクロールするティッカーを作る
縦にスクロールするティッカー機能を持つjQueryプラグイン「vTicker」の使い方