JavaScript

ニュースやお知らせなどに使えるティッカー「jQuery WebTicker」

ニュースやお知らせなんかに使えるティッカー「jQuery WebTicker」を使ってみました。テキストが滑らかに流れていくので目を引かせたい時に効果がありそうですね。使い方もほぼプラグインを読み込むだけなのでとてもシンプルです。ということで以下使い方です。

[ads_center]

使い方

jQuery本体とプラグインを読み込み、WebTickerをセットします。

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js?ver=1.7.1'></script>
<script type="text/javascript" src="jquery.webticker.js"></script>
<script type="text/javascript">
$(function(){
    $('#webTicker').webTicker();
});
</script>

公式サイトにサンプルのCSSもダウンロードできるのでそれも読み込んでおきます。

<link href="webticker.css" rel="stylesheet" type="text/css">

ティッカーにするHTMLです。

<ul id="webTicker">
    <li>Sample text</li>
    <li>Sample text</li>
    <li>Sample text</li>
    <!-- 略 -->
</ul>

これだけでOKです。

オプションはスピードと流れる方向を指定することができます。以下のように指定します。

<script type="text/javascript">
$(function(){
    $('#webTicker').webTicker({
        travelocity: 0.05, // スピード
        direction: 1, // 方向
    });
});
</script>

ということで、とても使いやすくてオススメです。ニュース系のサイトなんかにはぴったりですね。以下からダウンロードできます。

また、他のティッカーのプラグインで「JQUERY NEWS TICKER」というのがあるんですが、こちらもお洒落なティッカーなのでよかったら参考にしてみて下さい。

好きな色、パターン、グラデーション、背景画像などを探せる「ColRD」前のページ

レンガ風に要素を綺麗に並べてグリッドレイアウトが作れる「The Wookmark jQuery plugin」次のページ

関連記事

  1. Footnoted

    JavaScript

    脚注(注釈)を入れたい時に役立つjQueryプラグイン「Footnoted」

    FootnotedというjQueryプラグインは文章の中に脚注(注釈)…

  2. Micromodal.js

    JavaScript

    アクセシブルで軽量なモーダルダイアログを実装できる「Micromodal.js」

    Micromodal.jsは、アクセシブルでファイル容量も軽量なモーダ…

  3. baffle.js

    JavaScript

    DOM要素内のテキストを難読化させて読めるようにする「baffle.js」

    baffle.jsは、DOM要素内のテキストを暗号化して難読化させ、さ…

  4. VintageTxt

    JavaScript

    タイピングしているような効果を実装できるjQueryプラグイン「VintageTxt」

    VintageTxtというjQueryプラグインを使えば、文字をタイピ…

  5. Canvi

    JavaScript

    左右からスライド表示するシンプルなナビゲーションメニュー「Canvi」

    CanviはVanilla JSによるシンプルなナビゲーションメニュー…

  6. Water Wave Effect jQuery

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近の記事

  1. ダミアン・ハースト 桜
  2. パッキングエリア
  3. あらびきソーセージパイ
  4. REACH フロス
PAGE TOP