vTicker

JavaScript

シンプルで使い方も簡単!垂直ティッカーを実装できるjQueryプラグイン「vTicker」

シンプルで使い方も簡単な垂直ティッカーを実装できるjQueryプラグイン「vTicker」をご紹介します。ulのli要素に表示させるテキストを記述していき、vTickerをセットアップするだけです。スペースを有効活用したい時や、ちょっとした導線をつくりたい時によさそうですね。

[ads_center]

使い方

このようにli要素に表示させたいテキストを記述していきます。ティッカーはli要素ごとに切り替わっていきます。

<div id="sample">
    <ul>
        <li>サンプルテキスト1</li>
        <li>サンプルテキスト2</li>
        <li>サンプルテキスト3</li>
    </ul>
</div>

あとはvTickerをセットするだけです。

$(function() {
    $('#sample').vTicker();
});

オプションも色々あり、スピードやアイテムを表示させる数を指定することもできます。CSSで見た目をカスタマイズしたりすれば色々と応用が効きそうですね。

vTickerのダウンロードや詳細については以下の公式サイトで確認することができます。

関連記事

  1. Lity

    JavaScript

    超軽量でアクセシブル・レスポンシブなLightboxを実装できる「Lity」

    Lityは、超軽量でアクセシブル・レスポンシブなLightboxプラグ…

  2. tingle.js

    JavaScript

    シンプルで手軽に実装できるモーダルウィンドウ「tingle.js」

    tingle.jsは、シンプルなモーダルウィンドウを実装できるスクリプ…

  3. no-image
  4. JavaScript

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

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

  5. Ladda

    JavaScript

    ボタンとローディングアイコンが一緒になったUIを実装できるjQueryプラグイン「Ladda」

    Laddaはボタンとローディングアイコンが一緒になったUIを実装するこ…

  6. lightGallery

コメント

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

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

最近の記事

  1. ルック セレクション
  2. シルキーウインドモバイル
  3. アリエール パワージェルボール3D
  4. NuAns × Shibaful TAGPLATE

アーカイブ

PAGE TOP