省スペースでお知らせを流すニュースティッカー[jQuery.ticker.js]

公開日:  最終更新日:2015/06/10

省スペースでお知らせを流すニュースティッカー[jQuery.ticker.js]
ショップページにお知らせのようなものを表示したいけども、表示するスペースがない・・・

そんな時に使えるのがニュースティッカーです。

スポンサードリンク

ニュースティッカー「jquery.ticker.js」省スペースでお知らせ表示

例えば、こちらのショップ eSPORTS楽天支店
ショップオブザイヤー2012で(スポーツ・アウトドア)ジャンル大賞を受賞されてるショップ

↓↓の部分 新着情報が右からスライドして表示され切り替わっていきます。
33-1.png
ニュースティッカーと呼ばれるものですね。
(特定範囲内に文字列を流して表示させる表示方式)
全く同じものではありませんが、簡単に実装できそうなのを調べてみました。

ニュースティッカー実装方法について

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:フェードアウト時のスピードを指定

↓↓動作サンプル

少ないスペースで色々な情報を流す方法としては面白いですね。ぜひ、試してみてください。




FacebookページやGoogle+ページにもブログ更新・気になる情報を流していますので
よろしければ、この機会にぜひ「フォロー」または「いいね」をよろしくお願いします。

ネットショップ出店をお考えの方はこちらをどうぞ

ネットショップ出店サービス一覧

ショップ運営に使えるjQuery動作デモ1ページにまとめてみた

ECサイト・ネットショップで使えるjQueryデモをまとめてみた

ショップにカルーセル表示を実装「おすすめ」

カルーセル表示実装ならjQuery「slick.js」が簡単でおすすめ

ネットショップ運営の効率化に使えるソフト・ASPサービス

ネットショップ受注・在庫・商品・発注管理

仕入先・商材をお探しの方はこちらをどうぞ

ネットショップ運営に使える仕入・卸サイト一覧

ネットショップへの集客に使える広告いろいろ

ネットショップへの集客に使える広告まとめ

ネットショップで使えるCSS・JavaScriptのデモを1ページにまとめてみた

ECサイト・ネットショップで使えるCSS・JavaScriptのデモをまとめてみた

ブログでの集客に記事作成代行サービスを活用

記事作成に使える記事外注サービスまとめ

お店(実店舗)の集客に活用できる店舗ポータル・Webサービスまとめてみた

お店(実店舗)の集客に活用できる登録サイト・webサービスまとめてみた

ショップ運営に役立つwebサービス・ツールについてまとめてみた

ECサイト・ネットショップで使えるwebサービス・ツールをまとめてみた

楽天市場の運営者向けの商品陳列HTMLタグ生成無料ツール作ってみました

楽天市場向け無料ツール

Your Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

スポンサードリンク

記事が気に入ったらシェアお願いします

PAGE TOP ↑