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

    JavaScript

    水平・垂直に対応したVanilla JSによるタイムライン実装「Timeline」

    Timelineは水平・垂直に対応したVanilla JSを使ったタイ…

  2. jQuery Timespace

    JavaScript

    四方にドラッグ移動できる水平タイムライン実装「jQuery Timespace」

    jQuery Timespaceは上下左右と四方にドラッグ移動できる水…

  3. PWS Tabs jQuery Plugin
  4. SweetAlert2

    JavaScript

    カスタマイズ性が高くアクセシビリティ(WAI ARIA)に優れたアラート実装「SweetAlert2…

    SweetAlert2は、レスポンシブ対応でカスタマイズ性が高くアクセ…

  5. Animated Image Pieces

    JavaScript

    画像が細かいピースになるアニメーション実装「Animated Image Pieces」

    Animated Image Piecesは、画像が細かいピースに分解…

最近の記事

  1. Aモーニングセット
  2. 白トリュフの塩パンやメロンパンなど
  3. 東京都現代美術館
  4. スーリア バターチキン
  5. そそそ 明太クリームそうめん

アーカイブ

PAGE TOP