HOME > コラム > jQuery/JS Chips > 縦にスクロールするティッカー機能を持つjQueryプラグイン「vTicker」の使い方

縦にスクロールするティッカー機能を持つjQueryプラグイン「vTicker」の使い方

コラム

サイト内の新着通知や、突発的なお知らせを小スペースで表示することが出来るvTickerを紹介したいと思います。
vTickerはティッカーと呼ばれる表示方法を実現するjQueryプラグインです。
htmlで言うところの”marquee”と同じような表示をしますが、vTickerは横に流れるのではなく、縦に流れます(スクロールします)。
今、初めて知ったのですが、googleで「marquee html」と検索すると、検索件数の表示部分が横に流れるようになってました。
「ちょっとは役に立ったかな?」や「ちょっと面白いな(笑)」みたいなことを感じられましたら、シェアして頂けますと幸いです。

jQuery/JS Chipsに投稿したコラム記事

縦にスクロールするティッカー機能を持つjQueryプラグイン「vTicker」の使い方

vTickerはオプション豊富なティッカー機能を持つプラグイン

vTickerは、ティッカー機能を持つjQueryプラグインです。 オプションがかなり豊富にあります。

同じような動きをするhtmlで「marquee」がありますが、動き自体はよく似た動作をします。
ただ、このjQueryプラグインは、横にスクロールせず、縦にスクロールします。
これが大きな違いですね。

また、オプションも豊富にあるため、細かいコントロールも出来るようになっています。
いやはや、便利なjQueryプラグインです。

組み込み自体は非常に簡単ですので、もし機会がありましたら気軽に組み込んで頂けると思います。
では、進めていきたいと思います。

本家サイト

本家サイトです。
GitHub内のページですね。

ダウンロードと組み込みサンプル
組み込み済みファイルのダウンロード
phptemp_vt_160908.zip
組み込み済みサンプル

サンプルです。

サンプルには、トップページにのみ、コンテンツを追記しています。

元になるWEBサイトテンプレート(PHP)について

当サイト内の「SEOの基礎知識」の中のコンテンツです。

ポイント
ヘッダ内に組み入れたhtml

ヘッダ内に組み入れたhtmlソースです。

<script src="/js/jquery.vticker.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
	$('#tickerbox').vTicker('init', {mousePause:false});
});
</script>
トップページに組み入れたhtml

トップページに組み入れたhtmlソースです。

<div id="tickerarea">
<div id="tickerbox">
<ul>
<li>ニュース内容です。なんでも好きなことを書いてください。<br />ニュース内容です。なんでも好きなことを書いてください。</li>
<li>ニュース内容です。</li>
<li>ニュース内容です。</li>
<li>ニュース内容です。</li>
</ul>
</div>
</div>
追記したCSSファイルの内容

各種 top.css (3種類の top.css )にそれぞれ以下の記述を追記しました。
レスポンシブ対応の記述を含んでいます。

まず、PC用の” top.css ”に追記した内容です。

/******************************************
 トップページのティッカーエリア用CSS
******************************************/

#tickerarea {
	width: 800px;
	margin: 0 auto 20px auto;
}

#tickerbox {
	width: 100%;
	border: 1px solid #ccc;
	padding-right: 10px;
	padding-left: 10px;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
}

#tickerbox ul {
}

#tickerbox ul li {
	text-align: left;
}

次にスマホ用の” top.css ”に追記した内容です。

/******************************************
 トップページのティッカーエリア用CSS
******************************************/

#tickerarea {
	width: 80%;
	margin: 0 auto 20px auto;
}

#tickerbox {
	width: 100%;
	border: 1px solid #ccc;
	padding-right: 10px;
	padding-left: 10px;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
}

#tickerbox ul {
}

#tickerbox ul li {
	text-align: left;
}

最後に、タブレット端末向けの” top.css ”に追記した内容です。
本テンプレートではスマホ用と同一の内容にしているので、環境に併せて適宜調整をお願い致します。

/******************************************
 トップページのティッカーエリア用CSS
******************************************/

#tickerarea {
	width: 80%;
	margin: 0 auto 20px auto;
}

#tickerbox {
	width: 100%;
	border: 1px solid #ccc;
	padding-right: 10px;
	padding-left: 10px;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
}

#tickerbox ul {
}

#tickerbox ul li {
	text-align: left;
}
その他、補足

WEBサイトテンプレート(PHP)の修正にあたって、以下の点に配慮しています。

  • 今回、サンプルにしたWEBサイトテンプレート(PHP)は「 phptemp_160202.zip 」です。
締め

いかがでしたでしょうか?
簡単な記述で導入が出来るプラグインですね。

既に形が出来上がったページには、突発的にお知らせしたいことを差し込むには、デザイン的にも心情的にもなかなか難しいモノがありますよね。
そんな時にティッカーはが活躍すること間違いありません。

是非、使ってみてくださいね。

執筆 : 清水 隼斗

縦にスクロールするティッカー機能を持つjQueryプラグイン「vTicker」の使い方の通常ページ