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. JavaScript

    チルトシフト効果でミニチュア風の写真に仕上げてくれるjQueryプラグイン「tiltShift.js…

    指定した画像にチルトシフト効果をプラスしてミニチュア風にしてくれるjQ…

  2. FractionSlider

    JavaScript

    各要素ごとにスライドアニメーションを設定できるjQueryプラグイン「FractionSlider」…

    複数の各要素ごとにスライドアニメーションを設定できるjQueryプラグ…

  3. Switch

    JavaScript

    iOSスタイルのシンプルなチェックボックスを実装できる「Switch」

    Switchは、シンプルでパワフルなiOSスタイルのチェックボックスを…

  4. jQuery Bar Rating

    JavaScript

    選択範囲を評価ウィジェットに変換できる「jQuery Bar Rating」

    jQuery Bar Ratingは、ユーザーが選択する範囲を評価ウィ…

  5. Justified Gallery
  6. Lightense Images

コメント

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

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

最近の記事

  1. Olli
  2. 単語帳メーカー(Flashcard Maker App)
  3. 1Password 7
  4. 風に揺れる草

Facebookページ

PAGE TOP