JavaScript

フレキシブルな垂直ニュースティッカーを実装できるjQueryプラグイン「JQuery Advanced News Ticker」

JQuery Advanced News TickerというjQueryプラグインを使えば、フレキシブルでアニメーションする垂直型のニュースティッカーを実装することができます。ブログのトップページやサイドバーなんかに使ってみたいです。

[ads_center]

JQuery Advanced News Tickerの使い方

JQuery Advanced News Tickerの使い方

JQuery Advanced News Ticker | risq

こんな感じの垂直ティッカーです。スペースを有効に活用しながら、たくさんある記事を上手く見せたりすることができそうですね。

JQuery Advanced News Ticker

var nt_example1 = $('#nt-example1').newsTicker({
    row_height: 80,
    max_rows: 3,
    duration: 4000,
    prevButton: $('#nt-example1-prev'),
    nextButton: $('#nt-example1-next')
});

使い方もシンプルです。以下のようにHTMLをマークアップ。jQuery本体とnewsTicker.jpも読み込んでおきます。

<ul class="newsticker">
    <li>サンプルテキストサンプルテキスト</li>
    <li>サンプルテキストサンプルテキスト</li>
    <li>サンプルテキストサンプルテキスト</li>
    ・・・中略・・・
</ul>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="js/newsTicker.js">

ニュースティッカーをセット。

$('.newsticker').newsTicker();

オプションはこんな感じで指定することができます。

$('.newsticker').newsTicker({
    row_height: 48,
    max_rows: 2,
    speed: 600,
    direction: 'up',
    duration: 4000,
    autostart: 1,
    pauseOnHover: 0
});

他にも色々なカスタマイズをすることができるので、気になる方はチェックしてみてはいかがでしょうか。

フラットデザイン&ロングシャドウのアイコンフラットデザイン&ロングシャドウな19のソーシャルメディアのアイコン前のページ

ホバーするとテキストがレインボーに光るjQueryプラグイン「Unicorn.js」次のページUnicorn.js

関連記事

  1. Dependent Dropdown

    JavaScript

    ネストされたセレクトボックスを実装できる「Dependent Dropdown」

    Dependent Dropdownはネストされたセレクトボックスを実…

  2. Radial SVG Slider

    JavaScript

    放射状に切り替わるスライダーを実装できる「Radial SVG Slider」

    Radial SVG Sliderは、放射状に広がりながら切り替わるス…

  3. JavaScript

    巻き簾のようにメニューを開閉するアニメーションを実装できるjQueryプラグイン「Makisu」

    巻き簾のようにリスト化した要素を1つずつ開いていったり閉じていったりで…

  4. hop

    JavaScript

    Webページ上の好きな場所をハイライトできる「hop」

    hopはオーバーレイされたWebページ上の好きな場所をハイライトするこ…

  5. Panoramix Image

    JavaScript

    左右に移動できるパノラマ画像を表示させれる「Panoramix Image」

    Panoramix Imageは、左右に移動できるパノラマ画像を表示さ…

最近の記事

  1. Apple WatchでのMacロック解除を無効
  2. オータムスイートポテトフラペチーノ
  3. 紅葉
  4. ナノケア EH-NA0E
  5. スターバックス コロンビア サンタンデール

アーカイブ

PAGE TOP