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」というのがあるんですが、こちらもお洒落なティッカーなのでよかったら参考にしてみて下さい。

関連記事

  1. pagePiling.js

    JavaScript

    垂直にスライドするようなスクロールを実装できるjQueryプラグイン「pagePiling.js」

    pagePiling.jsは垂直にスライドするようなスクロール機能を実…

  2. socialShare.js
  3. jQuery Modal

    JavaScript

    シンプルでレスポンシブなモーダルボックス「jQuery Modal」

    jQuery Modalはシンプルでレスポンシブに対応したモーダルボッ…

  4. jQuery Elastic Grid
  5. CardTabs

    JavaScript

    ミニマルで超軽量・シンプルなタブを実装できるjQueryプラグイン「CardTabs」

    CardTabsは超軽量でシンプルなタブを実装できるjQueryプラグ…

  6. no-image

    JavaScript

    立体的なナビゲーションメニューを実装できる「Sidebar Menu Concept」

    Sidebar Menu Conceptは立体的なナビゲーションメニュ…

コメント

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

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

最近の記事

  1. フェルメール展
  2. 上島珈琲店 No.11
  3. 銀座トリコロール

アーカイブ

PAGE TOP