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の場合はマウスオーバーしてもアニメーションをし続けます。

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

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

MacにMySQLとphpMyAdminをインストールする手順前のページ

軽量(5KB)で機能も色々あるjQueryのスライダー「MobilySlider」を使ってみる次のページ

関連記事

  1. Stacked Strips

    JavaScript

    スタックしながらスクロールできるエフェクト実装「Stacked Strips」

    Stacked StripsはWebページをスクロールする時に、スタッ…

  2. Playful Little Tooltip Ideas
  3. Skippr

    JavaScript

    軽くて速いスライドショーを実装できるjQueryプラグイン「Skippr」

    SkipprというjQueryプラグインを使えば、軽くて速いスライドシ…

  4. bringins

    JavaScript

    コンテンツをかっこいいアニメーションページで魅せるjQueryプラグイン「bringins」

    bringinsはWebページ上のコンテンツを、アニメーションページと…

  5. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryのif文を使ってタグやクラス名によって条件分岐するやり方

    jQueryで普通にif文を使った条件分岐のやり方です。指定したタグや…

  6. Siema

    JavaScript

    軽量でシンプルで依存性のないカルーセルを実装できる「Siema」

    Siemaは軽量でシンプル、そしてjQueryなどの依存性のないカルー…

コメント

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

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

最近の記事

  1. EOS RP
  2. COMOLI シルクネルジャケット シルクネルドローストリングパンツ
  3. スターバックス ハシエンダ アルサシア
  4. イングリッシュマフィン

アーカイブ

PAGE TOP