【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にファイルを読み込むコードを記述するよ。

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

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

HTML

CSS

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

jQuery

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

サンプルデモを見る

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

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

HTML

CSS

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

jQuery

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

サンプルデモを見る

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

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

HTML

CSS

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

jQuery

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

サンプルデモを見る

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

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

HTML


    
        
            
                1つだけ表示テキスト1

CSS

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

jQuery

$(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
ミケランジェロ