シンプルなニュースティッカーを実装できるjQueryプラグイン「jquery.simpleTicker.js」

jquery.simpleTicker.jsは、回転したり横からスライドインしてくるニュースティッカーを実装できるjQueryプラグインです。

挙動については、以下デモページよりご確認いただけます。

デモページを見る

スポンサードリンク

jquery.simpleTicker.jsの使い方

ステップ1. jquery.simpleTicker.jsのダウンロードと設置

GitHubよりjquery.simpleTicker.jsをダウンロードします。

jquery.simpleTickerフォルダ内に入っている「jquery.simpleTicker.css」と「jquery.simpleTicker.js」をサーバー上に設置しましょう。

<head>内に以下を追加してそれぞれのファイルを読み込みます。

<link href="./jquery.simpleTicker/jquery.simpleTicker.css" rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="./jquery.simpleTicker/jquery.simpleTicker.js"></script>

2行目はjQuery本体の読み込みです。すでにjQuery本体を読込済みの場合は省いてください。

ステップ2. HTMLのマークアップ

HTMLは、以下のように.tickerクラスでリストを内包します。

<div class="ticker">
  <ul>
    <li>testestest1</li>
    <li>testestest2</li>
    <li>testestest3</li>
    <li>testestest4</li>
    <li>testestest5</li>
  </ul>
</div>

ステップ3. jquery.simpleTickerの実行

以下のスクリプトを</body>直前もしくは<head>内に記述して、jquery.simpleTickerを実行します。

<script>
  $(function(){
    $.simpleTicker($('.ticker'));
  });
</script>

上記の場合は、右から左にスライドしてくるニュースティッカーになります。

フェードして表示するようにしたい場合は、以下のようにオプションを追加します。

<script>
  $(function(){
    $.simpleTicker($('.ticker'),{'effectType':'fade'});
  });
</script>

同様に回転して表示させたい場合もオプションを追加します。

<script>
  $(function(){
    $.simpleTicker($('.ticker'),{'effectType':'roll'});
  });
</script>

オプションなしと挙動は変わりませんが、あえてスライド表示を明示したい場合は以下のようにします。

<script>
  $(function(){
    $.simpleTicker($('.ticker'),{'effectType':'slide'});
  });
</script>

あとがき

サクッとニュースティッカーを実装できて便利ですね。

そのままだと非常にシンプルな見た目なので、あとはサイトに合わせてCSSで見た目を調整してあげましょう。

シンプルなニュースティッカーを実装できるjQueryプラグイン「jquery.simpleTicker.js」