JavaScript

リストのテキストを1つずつ垂直にスライドさせていくjQueryのティッカー「Totem Ticker」

おもしろいですね、これ。リスト化したli要素を1つずつ垂直方向にスライドさせていくjQueryプラグインのティッカー「Totem Ticker」を試してみました。サイドバーなんかに設置してみてもよさそうですね。結構使う機会がありそうな感じです。以下、使い方とちょっとしたサンプルも作ってみたのでよろしければどうぞ。

[ads_center]

使い方

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

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

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.totemticker.js"></script>

いくつかオプションを設定します。

<script type="text/javascript">
$(function(){
    $('#vertical-ticker').totemticker({
        row_height: '100px',
        next      : '#ticker-next',
        previous  : '#ticker-previous',
        stop      : '#stop',
        start     : '#start',
        mousestop : true,
    });
});
</script>

マークアップはこんな感じです。id名にvertical-tickerとついたul要素の中のli要素をスライドさせていきます。

<ul id="vertical-ticker">
    <li>text01</li>
    <li>text02</li>
    <li>text03</li>
    <li>text04</li>
    <li>text05</li>
    <li>text06</li>
    <li>text07</li>
</ul>
<p><a href="#" id="ticker-previous">Previous</a> / <a href="#" id="ticker-next">Next</a> / <a id="stop" href="#">Stop</a> / <a id="start" href="#">Start</a></p>

サンプル

とりあえず適当に作ってみたサンプルです。細かい部分まで作ってないのでちょっとあれですが、こんな感じで動くんだなっていうのが伝わればいいかなーと思います。

  • text01
  • text02
  • text03
  • text04
  • text05
  • text06
  • text07

Previous Next Stop Start

サンプルではオプションを少し変更してみました。アニメーションのスピードや、間隔なんかを変更できます。

$(function(){
    $('#vertical-ticker').totemticker({
        row_height: '60px',
        speed: 500,
        interval: 2000,
        max_items: 5,
        next	: '#ticker-next',
        previous: '#ticker-previous',
        stop	: '#stop',
        start: '#start',
        mousestop: true
    });
});

以下、簡単なオプションです。

オプション

row_height
各ティッカーの行の高さです。均一に指定するようにします。
speed
アニメーションのスピードです。数値が高ければ遅く、低ければ速くなります。
interval
アニメーションする間隔のスピードです。こちらも数値を高くすれば間隔が長くなり、低くすれば短くなります。
max_items
表示する行の数です。例えば2つだけ表示したい場合は2と指定します。
mousestop
こちらは、マウスオーバーしている間はアニメーションさせないようにしたりできます。trueかfalseを指定できます。trueの場合はマウスオーバーするとアニメーションが止まり、falseの場合はマウスオーバーしてもアニメーションをし続けます。

こんな感じでオプションも簡単なものばかりなので、気軽に使えるかと思います。

とても使いやすいプラグインですね。

関連記事

  1. dndod

    JavaScript

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

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

  2. Squishy

    JavaScript

    テキストをコンテナに合わせて自動でサイズ変更してくれるjQueryプラグイン「Squishy」

    SquishyというjQueryプラグインを使えばテキストをコンテナに…

  3. Dynamic Table

    JavaScript

    スプレッドシートのようなテーブルを実装できるjQueryプラグイン「Dynamic Table」

    Dynamic Tableはスプレッドシートのような高機能なテーブルを…

  4. JavaScript

    レイアウトを超簡単に雑誌風に整列してくれるjQuery Masonryの使い方

    jQuery Masonryというプラグインを使えば、ものすごく簡単に…

  5. chalk-animation

    JavaScript

    カラフルなアニメーションを実装できる「chalk-animation」

    chalk-animationはカラフルなアニメーションによるテキスト…

  6. Radial Progress Bars

    JavaScript

    アニメーション付きのサークルプログレスバー「Radial Progress Bars」

    Radial Progress Barsは、アニメーション付きのサーク…

コメント

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

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

最近の記事

  1. USB-2H401BKN
  2. Dyson Pure Cool Me
  3. ルック セレクション
  4. シルキーウインドモバイル

アーカイブ

PAGE TOP