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. Sal.js

    JavaScript

    Vanilla JSによる軽量のスクロールアニメーションライブラリ「Sal.js」

    Sal.jsは軽量のスクロールアニメーションを実装できるライブラリです…

  2. Changing Background Color while scrolling
  3. jQuery Timespace

    JavaScript

    四方にドラッグ移動できる水平タイムライン実装「jQuery Timespace」

    jQuery Timespaceは上下左右と四方にドラッグ移動できる水…

  4. JavaScript

    ナビゲーションをレスポンシブデザインにしてくれるjQueryプラグイン「HorizontalNav」…

    覚えておくと便利そうだったのでメモがてらエントリーします。リスト化した…

  5. JavaScript

    jQuery Backstretchを使えば超簡単にブラウザサイズに合った背景画像を表示できる

    背景画像をブラウザのサイズに合わせて表示できるプラグイン「jQuery…

  6. Tabslet

    JavaScript

    jQueryプラグインでタブ機能が実装できる「Tabslet」

    TabsletというjQueryプラグインを使えばWebサイトにタブ機…

コメント

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

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

最近の記事

  1. COMOLIの製品染ナイロン アノラックとトラックパンツ
  2. WH-XB900N
  3. Eufy RoboVac L70 Hybrid
  4. cheero Smart USB Charger 48W CHE-320

アーカイブ

PAGE TOP