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で見た目を調整してあげましょう。