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. no-image

    JavaScript

    タッチフレンドリーでモバイルでも快適に動作する「simplelightbox」

    simplelightboxはレスポンシブ対応でタッチフレンドリーなl…

  2. Rainbow.js
  3. LC Micro Slider
  4. number-divider.js

    JavaScript

    数字を分割できるjQueryプラグイン「number-divider.js」

    number-divider.jsは数字を分割させることができるjQu…

  5. no-image

    JavaScript

    軽量・高速でレスポンシブ対応のjQueryスライダー「partialViewSlider」

    partialViewSliderは左右にスライドする軽量・高速でレス…

  6. HC Sticky

    JavaScript

    スクロールしても要素を固定できるJSライブラリ「HC Sticky」

    HC Stickyはスクロールした時に特定の要素を固定したまま表示でき…

コメント

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

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

最近の記事

  1. 田沢湖
  2. ハクバ シリコンクロス
  3. トライポッドスリーブ
  4. レンズペン3 ミニプロとレンズペン ELITE マイクロプロ

Instagram始めました

Facebookページ

PAGE TOP