今日の人気記事

  1. レスポンシブなメニューを作成「MeanMenu」
  2. テーブルやリストから文字列を検索「QuickSearch」
  3. 指定した要素を更新(変更)する「Refreshing an element at a set time interval」
  4. アニメ効果付きの円グラフを作成「Circliful」
  5. カウントダウン作成「Countdown」マルチ言語対応

さまざまなアニメ効果付きのニュースティッカー「Easy Ticker」 - jQueryプラグイン

スポンサーリンク

さまざまなアニメ効果付きのニュースティッカーを作成するプラグイン「Easy Ticker」を紹介します。

Easy Ticker

ニュースティッカーとは、サイトのニュース・更新情報や注目サイトのRSSを表示するリストのことです。

このプラグインを使えば、そのニュースティッカーにさまざまなアニメーションを付加することができます。アップやダウン……などさまざまです。

スポンサーリンク

デモのニュースティッカーをご覧ください。

「Easy Ticker」のデモ

ソース(HTML + jQuery)


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="Easy Tickerのデモでーす。">
<title>Easy Ticker - jQueryプラグイン</title>

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="jquery.easing.min.js"></script>
<script src="jquery.easy-ticker.js"></script>
<script>
$(document).ready(function(){
  $('.ticker').easyTicker({
    direction: 'up',
    easing: 'swing',
    speed: 'slow',
    interval: 2000,
    height: 'auto',
    visible: 0,
    mousePause: 1,
    controls: {
      up: '',
      down: '',
      toggle: '',
      playText: 'Play',
      stopText: 'Stop'
    }
  });
});
</script>
</head>
<body>
<h1>Easy Tickerのデモでーす。</h1>

<div class="ticker">
<ul>
  <li>ニュースとか新着記事 ①</li>
  <li>ニュースとか新着記事 ②</li>
  <li>ニュースとか新着記事 ③</li>
  <li>ニュースとか新着記事 ④</li>
  <li>ニュースとか新着記事 ⑤</li>
  <li>ニュースとか新着記事 ⑥</li>
  <li>ニュースとか新着記事 ⑦</li>
  <li>ニュースとか新着記事 ⑧</li>
  <li>ニュースとか新着記事 ⑨</li>
</ul>
</div>

</body>
</html>

jsファイルのダウンロード、その他のオプション詳細はこちらからどうぞ。
» Easy Ticker

スポンサーリンク

関連記事(一部広告含む)