制作のご相談はこちら
下からテキストが現れる(ニュースティッカー)プラグイン「jquery.simpleTicker.js」の実装方法

公開日 : 2019年04月24日 / 最終更新日 : 2019年06月01日

下からテキストが現れる(ニュースティッカー)プラグイン「jquery.simpleTicker.js」の実装方法


よくトップページのビジュアル下に最新情報を載せるニュースティッカーという手法があります。
1項目ずつ流れていくので、だらだらとニュース一覧を並べるよりスタイリッシュでクールなイメージになっておすすめです。

そのニュースティッカーをプラグインで簡単に実装できる方法がありますのでご紹介します。

jquery.simpleTicker.jsを使って実装してみる

ファイルはこちらのGitHubからダウンロードしてください。

ダウンロードしたらjquery.simpleTicker.cssjquery.simpleTicker.jsを任意のディレクトリに格納します。

HTML、CSS、scriptは以下のように記述します。
※CSSは jquery.simpleTicker.cssに上書きせず、別のCSSファイルに記述することをおすすめします。

HTML

<div id="ticker" class="ticker">
	<ul>
	<li><div><span>2019.5.1</span><a href="#">テキスト1■テキスト1■テキスト1■テキスト1■テキスト1■</a></div></li>
	<li><div><span>2019.5.2</span><a href="#">テキスト2■テキスト2■テキスト2■テキスト2■テキスト2■</a></div></li>
	<li><div><span>2019.5.3</span><a href="#">テキスト3■テキスト3■テキスト3■テキスト3■テキスト3■</a></div></li>
	<li><div><span>2019.5.4</span><a href="#">テキスト4■テキスト4■テキスト4■テキスト4■テキスト4■</a></div></li>
	</ul>
</div>

CSS

jquery.simpleTicker.cssとは別にCSSファイルを設け、以下を記述します。
このCSSファイルをjquery.simpleTicker.cssの後に読み込ませることでプラグインのCSSを触らずにCSSの上書きをすることが可能です。

#wrapper {
padding: 30px;
}

.ticker {
padding: 0;
width: 100%;
}

.ticker li div {
padding: 10px;
}

.ticker span {
margin: 0 10px 0 0;
display: inline-block;
}

@media only screen and (max-width: 767px) {
.ticker span {
display: block;
}
}

jQuery

$(function(){
  $.simpleTicker($('#ticker'),{'effectType':'roll'});
});

effectTypeの値をfadeにするとフェードアニメーションに、slideにすると右からテキストがスライドしてくるアニメーションに変えられます。
デモではrollにして下から現れるアニメーションにしています。

実装したデモはこちらです。 レスポンシブで使いやすいように少しカスタマイズしてみました。
※CSSを微修正しました(6/1)

DEMO