【jQuery】シンプルなニュースティッカーが簡単実装！jquery.simpleTicker.jsの使い方

どうも、ジャングルオーシャンのミケです。

今日はシンプルなニュースティッカーが実装できるjquery.simpleTicker.jsのご紹介だよ！

ニュースティッカーとは

ニュースティッカーって何っていう人もいると思うんだけど

下からテキストがシュルッと出てくるものだよ。

この機能の用途としては

お知らせ、ニュース、新着情報などを掲載する時に使えるよ。

この機能を簡単にシンプルに表示できるのがjquery.simpleTicker.jsだよ。

サンプルデモページを用意したから見てみてね。

サンプルデモページはこちら

simpleTickerの使い方

ファイルのダウンロード

まずはjQueryの設置をするよ！

jQueryの公式サイトからファイルをダウンロードしてね。

jQueryの公式サイトはこちら

次にjquery.simpleTicker.jsを入れるために

GitHubからダウンロードするよ。

jquery.simpleTicker.jsのGitHubはこちら

GitHubのページに飛んだら

「Clone or download」という緑のボタンをクリックして

ファイルをダウンロードしてね。

zipファイルがダウンロードできるので解凍して

中に入っているファイルを取り出してね。

必要なファイルは

jquery.simpleTickerフォルダの中のjquery.simpleTicker.cssと

jquery.simpleTickerフォルダの中のjquery.simpleTicker.jsの

2ファイルだよ。

これで必要なファイルは揃ったから

次にHTMLにファイルを読み込むコードを記述するよ。

<script src="jsを設置しているディレクトリ/jquery-3.4.1.min.js"></script>
<script src="jsを設置しているディレクトリ/jquery.simpleTicker.js"></script>

1 2	<script src="jsを設置しているディレクトリ/jquery-3.4.1.min.js"></script> <script src="jsを設置しているディレクトリ/jquery.simpleTicker.js"></script>

それじゃニュースティッカーを実装してみよう！

回転して出てくるパターン

HTML

<div id="ticker-roll" class="ticker">
    <ul>
        <li style="list-style-type: none;">
            <ul>
                <li>回転テキスト1</li>
            </ul>
        </li>
    </ul>
    <ul>
        <li style="list-style-type: none;">
            <ul>
                <li>回転テキスト2</li>
            </ul>
        </li>
    </ul>
    <ul>
        <li style="list-style-type: none;">
            <ul>
                <li>回転テキスト3</li>
            </ul>
        </li>
    </ul>
</div>

<ul>

<ul>

<li>回転テキスト1</li>

</ul>

</li>

</ul>

<ul>

<ul>

<li>回転テキスト2</li>

</ul>

</li>

</ul>

<ul>

<ul>

<li>回転テキスト3</li>

</ul>

</li>

</ul>

</div>

CSS

div.ticker{width: calc(100% - 20px);}

1	div.ticker{width: calc(100% - 20px);}

jQuery

$(function(){
  $.simpleTicker($("#ticker-roll"),{'effectType':'roll'});
});

$(function(){

$.simpleTicker($("#ticker-roll"),{'effectType':'roll'});

});

サンプルデモを見る

レスポンシブで使えるようにニュースティッカーの横幅が100%表示になるようにしているよ。jquery.simpleTicker.cssでpaddingが上下左右で10pxついているから-20pxをつけているよ。

フェードして出てくるパターン

HTML

<div id="ticker-fade" class="ticker">
    <ul>
        <li style="list-style-type: none;">
            <ul>
                <li>フェードテキスト1</li>
            </ul>
        </li>
    </ul>
    <ul>
        <li style="list-style-type: none;">
            <ul>
                <li>フェードテキスト2</li>
            </ul>
        </li>
    </ul>
    <ul>
        <li style="list-style-type: none;">
            <ul>
                <li>フェードテキスト3</li>
            </ul>
        </li>
    </ul>
</div>

<ul>

<ul>

<li>フェードテキスト1</li>

</ul>

</li>

</ul>

<ul>

<ul>

<li>フェードテキスト2</li>

</ul>

</li>

</ul>

<ul>

<ul>

<li>フェードテキスト3</li>

</ul>

</li>

</ul>

</div>

CSS

div.ticker{width: calc(100% - 20px);}

1	div.ticker{width: calc(100% - 20px);}

jQuery

$(function(){
  $.simpleTicker($("#ticker-fade"),{'effectType':'fade'});
});

$(function(){

$.simpleTicker($("#ticker-fade"),{'effectType':'fade'});

});

サンプルデモを見る

CSSで横幅は100%表示にしているよ。「回転して出てくるパターン」のHTMLのidをticker-fadeにしてjQueryのeffectTypeをfadeに変更しただけだよ。

スライドして出てくるパターン

HTML

<div id="ticker-slide" class="ticker">
    <ul>
        <li style="list-style-type: none;">
            <ul>
                <li>スライドテキスト1</li>
            </ul>
        </li>
    </ul>
    <ul>
        <li style="list-style-type: none;">
            <ul>
                <li>スライドテキスト2</li>
            </ul>
        </li>
    </ul>
    <ul>
        <li style="list-style-type: none;">
            <ul>
                <li>スライドテキスト3</li>
            </ul>
        </li>
    </ul>
</div>

<ul>

<ul>

<li>スライドテキスト1</li>

</ul>

</li>

</ul>

<ul>

<ul>

<li>スライドテキスト2</li>

</ul>

</li>

</ul>

<ul>

<ul>

<li>スライドテキスト3</li>

</ul>

</li>

</ul>

</div>

CSS

div.ticker{width: calc(100% - 20px);}

1	div.ticker{width: calc(100% - 20px);}

jQuery

$(function(){
  $.simpleTicker($("#ticker-slide"),{'effectType':'slide'});
});

$(function(){

$.simpleTicker($("#ticker-slide"),{'effectType':'slide'});

});

サンプルデモを見る

CSSで横幅は100%表示にしているよ。「回転して出てくるパターン」のHTMLのidをticker-slideにしてjQueryのeffectTypeをslideに変更しただけだよ。

1つだけ表示するパターン

HTML

<div id="ticker-one-item" class="ticker">
    <ul>
        <li style="list-style-type: none;">
            <ul>
                <li>1つだけ表示テキスト1</li>
            </ul>
        </li>
    </ul>
</div>

<ul>

<ul>

<li>1つだけ表示テキスト1</li>

</ul>

</li>

</ul>

</div>

CSS

div.ticker{width: calc(100% - 20px);}

1	div.ticker{width: calc(100% - 20px);}

jQuery

$(function(){
  $.simpleTicker($("#ticker-one-item"),{'effectType':'fade'});
});

$(function(){

$.simpleTicker($("#ticker-one-item"),{'effectType':'fade'});

});

サンプルデモを見る

CSSで横幅は100%表示にしているよ。「回転して出てくるパターン」のHTMLのidをticker-one-itemにして、ulタグの中のliタグを1個にしているよ。jQueryのeffectTypeはなんでも大丈夫だよ。

まとめ

jquery.simpleTicker.jsはニュースティッカーが実装できていいよね！

こういうシンプルな記述で実装できるjQueryのプラグインは最高だね！

それじゃまた今度！

TwitterやFacebookのフォローよろしくね！

Twitter
@michelgorilla

Facebook
ミケランジェロ