プログラミング

【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

jQuery

サンプルデモを見る

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

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

HTML

CSS

jQuery

サンプルデモを見る

CSSで横幅は100%表示にしているよ。「回転して出てくるパターン」HTMLidticker-fadeにしてjQueryeffectTypefadeに変更しただけだよ。

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

HTML

CSS

jQuery

サンプルデモを見る

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

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

HTML

CSS

jQuery

サンプルデモを見る

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

まとめ

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

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

それじゃまた今度!

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

Twitter
@michelgorilla

Facebook
ミケランジェロ




  • この記事を書いた人

michelangelo

オレンジアフロがチャームポイントゴリラです。Webが楽しくて記事書いてます。よろしくお願いします。

-プログラミング
-, , ,

© 2024 ジャングルオーシャン