省スペースでお知らせを流すニュースティッカー[jQuery.ticker.js]
![省スペースでお知らせを流すニュースティッカー[jQuery.ticker.js]](https://peacepopo.net/wp-content/uploads/33-1.gif)
ショップページにお知らせのようなものを表示したいけども、表示するスペースがない・・・そんな時に使えるのがニュースティッカーです。MARQUEEタグなどを使ってテキストを動かすこともできますが、表現できる内容が限られたりします。また、MARQUEEタグも廃止予定のため推奨される方法ではありません。jQueryプラグインを使って簡単にニュースティッカーを実装する方法を紹介します。ちょっとしたお知らせ、新着情報などを掲載するのに活用してみてはいかがでしょうか。
ニュースティッカー「jquery.ticker.js」省スペースでお知らせ表示
例えば、こちらのショップ ｅＳＰＯＲＴＳ楽天支店
ショップオブザイヤー2012で（スポーツ・アウトドア）ジャンル大賞を受賞されてるショップ
↓↓の部分 新着情報が右からスライドして表示され切り替わっていきます。
ニュースティッカーと呼ばれるものですね。
（特定範囲内に文字列を流して表示させる表示方式）
全く同じものではありませんが、簡単に実装できそうなのを調べてみました。
ニュースティッカー実装方法について
jQuery News Tickerを参考にしました。
上記サイトより、ファイル一式をダウンロードしてください。
ダウンロードしたファイルの中のjquery.ticker.js、ticker-style.cssを使用します。
また、http://jquery.com/よりjquery.min.jsもダウンロードしてください。
H25.11.17追記
※最新のjqueryでは動作しない可能性があります。
jQueryの古いバージョン 1.4.2
http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js
上記のURLを直接開いて、名前を付けて保存するか
外部参照OKの環境であれば src=に指定してみてください。
サンプルソース NewsTicker.html
<link href="ticker-style.css" rel="stylesheet" type="text/css">
<script src="jquery.min.js" type="text/javascript"></script>
<script src="jquery.ticker.js" type="text/javascript"></script>
<ul id="js-news" class="js-hidden">
<li class="news-item">○月○日 新着商品入荷しました</li>
<li class="news-item">ポイント○倍イベント開催中！！</li>
<li class="news-item">商品○○が楽天ランキング1位を受賞しました</li>
<li class="news-item">○月○日 商品■■が再入荷しました</li>
</ul>
<script type="text/javascript">
$(function () {
$('#js-news').ticker({
speed: 0.10,
titleText: 'NEW!!',
displayType: 'reveal',
direction: 'ltr',
pauseOnItems: 5000
});
});
</script>
1、2、3行目 ダウンロードしたファイルを読み込みんでいます。
(GOLD内にアップするのを忘れないでください。また、パスも環境に合わせて変更してください)
見た目等を調整したい場合は、ticker-style.cssの内容を変更する必要があります。
5行目～10行目
お知らせを記述している部分もシンプルな感じです。
サンプルでは文字だけですが、リンク等も設定することが出来ます。
12行目～24行目
ニュースティッカーを実行するための記述になります。
実行時のオプションについてもいくつか書いておきます。
（詳細については参考サイトにて確認ください。）
speed:文字が流れていくスピードを設定(アニメーションがrevealの時)
titleText:タイトルのテキストを指定
displayType:アニメーション指定(revealかfade)
direction:ltrかrtlを指定(ltrで左から右へ、rtlで右から左)
pauseOnItems:停止間隔を指定
fadeInSpeed: displayTypeをfadeに指定した時のスピードを指定
fadeOutSpeed:フェードアウト時のスピードを指定
↓↓動作サンプル
少ないスペースで色々な情報を流す方法としては面白いですね。ぜひ、試してみてください。
【関連する記事】
Your Message