• まだ目覚めて間もない勇者は城下をあとにした
  • 目の前に見える塔に行く術も知らぬ勇者はまずは北に向かう
  • 突然、骸に乗ったカラスと、角の生えたウサギが現れる
  • 目が覚めた勇者の目に王様の悲しそうな顔が映っていた
  • 「おぉ勇者!死んでしまうとはふがいない!」
  • どうやら死んでしまったらしい。勇者はなぜ生き返ったのか疑問に思った
  • しかし自分の思考とは裏腹に勇者は王様に背を向け城を出た。
  • この世界でキャラクターは思考することを許されない。全てはAとBと十字のなすがまま
  • そして勇者は酒場のドアを開いた
  • そこに待つのは、仲間かそれとも…

このプラグインの実際の動きを確認したい場合は、PCからアクセスして下さい。

  • files
  • js
  • html
<link href="<PATH>/ticker-style.css" rel="stylesheet" />
<script src="<PATH>/jquery.min.js"></script>
<script src="<PATH>/jquery.ticker.js"></script>
<script>
	$(window).load(function(){
		$('#NewsTickerDemo').ticker({
			titleText: '勇者の近況ver.1',
			controls: false
		});
	});
</script>

//オプション一覧
speed: 0.10,           // The speed of the reveal
ajaxFeed: false,       // Populate jQuery News Ticker via a feed
feedUrl: false,        // The URL of the feed
// MUST BE ON THE SAME DOMAIN AS THE TICKER
feedType: 'xml',       // Currently only XML
htmlFeed: true,        // Populate jQuery News Ticker via HTML
debugMode: true,       // Show some helpful errors in the console or as alerts
// SHOULD BE SET TO FALSE FOR PRODUCTION SITES!
controls: true,        // Whether or not to show the jQuery News Ticker controls
titleText: 'Latest',   // To remove the title set this to an empty String
displayType: 'reveal', // Animation type - current options are 'reveal' or 'fade'
direction: 'ltr'       // Ticker direction - current options are 'ltr' or 'rtl'
pauseOnItems: 2000,    // The pause on a news item before being replaced
fadeInSpeed: 600,      // Speed of fade in animation
fadeOutSpeed: 300      // Speed of fade out animation
<ul id="NewsTickerDemo" class="js-hidden">
	<li class="news-item">まだ目覚めて間もない勇者は城下をあとにした</li>
	<li class="news-item">目の前に見える塔に行く術も知らぬ勇者はまずは北に向かう</li>
	<li class="news-item">突然、骸に乗ったカラスと、角の生えたウサギが現れる</li>
	<li class="news-item">目が覚めた勇者の目に王様の悲しそうな顔が映っていた</li>
	<li class="news-item">「おぉ勇者!死んでしまうとはふがいない!」</li>
	<li class="news-item">どうやら死んでしまったらしい。勇者はなぜ生き返ったのか疑問に思った</li>
	<li class="news-item">しかし自分の思考とは裏腹に勇者は王様に背を向け城を出た。</li>
	<li class="news-item">この世界でキャラクターは思考することを許されない。全てはAとBと十字のなすがまま</li>
	<li class="news-item">そして勇者は酒場のドアを開いた</li>
	<li class="news-item">そこに待つのは、仲間かそれとも...</li>
</ul>

NewsTickerについて

NewsTickerは、キーボード入力しているような見せ方で文字を表示するティッカープラグインです。
speedを遅くしすぎると、焦れる人続出ですね。
ダウンロード こちら
ドキュメント こちら
デモ こちら
ライセンスGPL
対応ブラウザ

関連するjQueryプラグイン

  • Marquee

    Marquee

    携帯サイトで多用したmarqueeタグと同じ機能をcss3で実装

  • Innerfade

    Innerfade

    文字や画像をフェードで切り替える

  • vTicker

    vTicker

    縦方向のティッカーを設置できる

  • easyTicker

    easyTicker

    簡単に目立つティッカーを設置できる

  • liScroll

    liScroll

    横スクロール型のRPGじゃなくて、横スクロール型のティッカー