JavaScript

滑らかに流れるニュースティッカー「jQuery News Ticker」がとてもいい

jQueryプラグイン「JQUERY NEWS TICKER」を使ってみました。これを使えばとても簡単にニュースティッカーを実装することができます。滑らかに流れてくるので爽快です。マークアップはリスト要素を記述するだけなのでシンプルです。あと、オプションでAjaxを使ってフィードのURLを指定するだけで簡単に記事タイトルを流すこともできます。以下、使い方です。

[ads_center]

使い方

以下のURLからダウンロードできます。

head内でjQuery本体とプラグインを読み込みます。

<link href="styles/ticker-style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script src="includes/jquery.ticker.js" type="text/javascript"></script>

ニュースティッカーを実装したいリスト要素を指定します。

<script type="text/javascript">
$(function () {
    $('#js-news').ticker();
});
</script>

マークアップはこんな感じです。

<ul id="js-news" class="js-hidden">
    <li class="news-item">1.サンプルテキストサンプルテキスト</li>
    <li class="news-item">2.サンプルテキストサンプルテキスト</li>
    <li class="news-item">3.サンプルテキストサンプルテキスト</li>
    <li class="news-item">4.サンプルテキストサンプルテキスト</li>
    <li class="news-item">5.サンプルテキストサンプルテキスト</li>
    <li class="news-item">6.サンプルテキストサンプルテキスト</li>
    <li class="news-item">7.サンプルテキストサンプルテキスト</li>
</ul>

とても簡単でいいですね。サンプルも作ってみました。

サンプル

  • 1.サンプルテキストサンプルテキスト
  • 2.サンプルテキストサンプルテキスト
  • 3.サンプルテキストサンプルテキスト
  • 4.サンプルテキストサンプルテキスト
  • 5.サンプルテキストサンプルテキスト
  • 6.サンプルテキストサンプルテキスト
  • 7.サンプルテキストサンプルテキスト

オプション

いくつかオプションもあります。オプションを指定する場合はこんな感じで指定します。

$(function () {
    $('#js-news').ticker({
        speed: 0.10,
        ajaxFeed: false,
        feedUrl: false,
        feedType: 'xml',
        htmlFeed: true,
        debugMode: true,
        controls: true,
        titleText: 'NEW!!',
        displayType: 'reveal',
        direction: 'ltr',
        pauseOnItems: 2000,
        fadeInSpeed: 600,
        fadeOutSpeed: 300
    });
});

以下、分かる範囲でオプションの解説です。

speed
文字が流れていくスピードを設定できます。
ajaxFeed
trueにすることでfeedUrlを指定した場合フィードを取得することができます。
feedUrl
取得したいフィードのURLを指定します。
feedType
フィードのタイプです。
controls
コントロールボタンを表示できます。trueで表示でき、falseで非表示にできます。
titleText
ティッカーのタイトルのテキストを変更できます。ここでのサンプルでは「NEW!!」を指定してあります。
displayType
アニメーションを指定できます。revealかfadeを指定することができます。デフォルトはrevealです。fadeにするとリストがフェードで切り替わっていきます。
direction
ltrかrtlを指定できます。どちらから流れるようにするかの設定です。ltrで左から右へ、rtlで右から左です。デフォルトはltrです。
fadeInSpeed
displayTypeをfadeに指定した時のフェードインで表示されるスピードを指定できます。
fadeOutSpeed
フェードアウト時のスピードを指定できます。

色々と自分に合うように調整することができますね。ニュース系のサイトや即時性を追求したい場合なんかにいいかもしれないっすね。

関連記事

  1. no-image

    JavaScript

    要素ごとにスクロールできるjQueryプラグイン「snapScroll.js」

    snapScroll.jsは要素ごとにきりのいいところでスクロールされ…

  2. JavaScript

    カスタマイズしやすい軽量のツールチップを実装できるjQueryプラグイン「TinyTip」

    TinyTipはカスタマイズしやすいツールチップを実装することができる…

  3. dndod

    JavaScript

    依存性のないシンプルで簡単なモーダルライブラリ「dndod」

    dndodはjQueryなどへの依存性のないシンプルで簡単なJavaS…

  4. FlexSlider

    JavaScript

    jQueryプラグインのレスポンシブな軽量スライダー「FLEXSLIDER」の使い方や設定方法

    すごくいいですね、これ。スマートフォンにも対応させたいスライダーを探し…

  5. progresspieSVG

    JavaScript

    円形のプログレスバーを実装できる「progresspieSVG」

    progresspieSVGは円形のプログレスバーを実装できるjQue…

  6. Animated Page Transition

コメント

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

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

最近の記事

  1. F7U070bt
  2. 生きている玄米と玄米酵素ブレンド雑穀
  3. BOOST↑CHARGE Apple Watch用モバイルバッテリー

アーカイブ

PAGE TOP