エフェクト豊富なニュースティッカー用プラグイン「inewsticker」

「inewsticker」は、色々なエフェクトでニュースティッカーが実装できるjQueryプラグインです。ダウンロード

エフェクトには、fade/slide/typingの3つが可能です。
デモ

スクリプト

<script src="inewsticker.js" type="text/javascript"></script>

実装

<ul class="fade">
    <li>ニュース1つ目</li>
    <li>ニュース2つ目</li>
    <li>ニュース3つ目</li>
    <li>ニュース4つ目</li>
</ul>

<!-- オプション -->
<script type="text/javascript">
$(document).ready(function() {
    $('.fade').inewsticker({
        speed : 3000,          // テキストの切替時間
        effect : 'fade',       // エフェクト fade/slide/typing
        dir : 'ltr',           // テキスト方向 ltr/rtl
        font_size : 13,        // フォントサイズ
        color : '#000',        // フォント色
        font_family : 'arial', // フォント
        delay_after : 1000     // (?)effectが'typing'の場合の切替時間
    });
});
</script>

その他

要素のclassやid(上の例では.fade)は、CSSのフレームワークなどと被ることがあるので表示されないときは、スタイルを確認してみて下さい。

その他プラグイン
Web-Ticker / jQuery Marquee / liScroll  テキストが左右に流れる
JQuery Advanced News Ticker / vTicker  テキストが上下に流れる
jQuery News Ticker
Dynamic News RSSフィードから取得して実装が可能
Airport / Text Effects / jQuery Ticker 空港のボーディングボードのようにテキストをパタパタ

Web-Ticker

ダウンロード デモ

<link href="webticker.css" type="text/css" rel="stylesheet">
<script src="jquery.min.js" type="text/javascript"></script>
<script src="jquery.webticker.min.js" type="text/javascript"></script>
<ul id="webticker">
    <li>My First News Item</li> 
    <li>My Second News Item</li>
    <li>My Third News Item</li>
</ul>

<script type="text/javascript">
jQuery(function(){
    jQuery('#webticker').webTicker();
}); 
</script>

Airport

ダウンロード デモ

<script src="jquery.min.js" type="text/javascript"></script>
<script src="jquery.airport-1.1.source.js" type="text/javascript"></script>
<div id="airport"></div>

<script type="text/javascript">
$("#airport").airport([ 'moscow1', 'berlin', 'stockholm' ]);
</script>
  • このエントリーをはてなブックマークに追加

関連記事

no image

スワイプ対応の画像スライダー・ギャラリー用プラグイン

画像スライダー(ギャラリー)を作成してくれるjQueryプラグインの中からスワイプ操作で画像をスライドできるものをいくつか集めてみました。 シンプルでカスタマイズ豊富なスライダー用プラグイン「b

Lightboxなどが実装できるプラグイン「Magnific Popup」

「Magnific Popup」はlightboxを実装できるjQueryプラグインです。 この手のものは、商用利用に制限がかかっているものが多いですがこのプラグインはMITライセンスで提供されてい

select(list)ボックスを左右に並べて視覚的に使いやすくしてくれる「Multiselect」

「Multiselect」は、selectボックスを左右に配置して、選択したもの・していないものを左右に分けてくれるjQueryプラグインです。視覚的に使いやすくしてくれます。ダウンロードはこちら

テキストに動きをつけるプラグイン

テキストをフェイド・スライド「Textillate」 テキストをフェイドイン(アウト)、スライドイン(アウト)してくれます。 ダウンロード デモ My Tit

no image

色々なタイプの画像ギャラリーが実装できる「Rondell」

「Rondell」は、様々なタイプの画像ギャラリーを実装してくれるjQueryプラグインです。 カルーセル・スライダー・ギャラリーなど一通り実装可能です。 ダウンロード 本家デモ

no image

シンプルにポップアップを実装できる「PopBox」

「PopBox」は、シンプルにポップアップを実装できるjQueryプラグインです。 スクリプト HTML Click Here!

no image

時刻入力に便利な「Timepicker for Bootstrap」

「Timepicker for Bootstrap」は、テキストボックスへの時刻入力を便利にしてくれるjQueryプラグインです。 2014/06/16 Bootstrap3対応版に書き換え

「jqPlot」 カスタマイズ

以前、ここで使用した「jqPlot」ですが、色々なキーワードで訪問される方がいらっしゃったので、それを元ネタとして使わせてもらいカスタマイズ方法を紹介したいと思います。 以下4つのファイルへリンクし

商用利用フリー Lightbox プラグイン

商用利用フリー(投稿時)のlightbox用プラグインをまとめてみました。最新のライセンスに関しては各サイトに確認をお願いいたします。) lightboxの中にもギャラリー表示が可能なもの、ギャラリ

Lightboxプラグイン「Boxer」

「Boxer」はLightboxやモーダルウィンドウを実装できるjQueryプラグインです。画像だけでなく動画にも対応しています。 モバイル環境にも最適化されていて、#レスポンシブ 対応で、#スワイ

Comment

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

    PAGE TOP ↑