電網通信あみあみ

これならできちゃう!

【 魅力あるサイトを作成しよう(16) -- jQuery でできる色々な演出を見てみよう!2 】

前回に続いてWebの勉強に勤しむあみですが・・・。

ami
「jQuery」って色々できるんだねー。
gen
前回説明したけど、結構凝ったことができるんだよね。
場合によっては使えるブラウザの制限があったりするけど。
ami
今回はどんなプラグインが見られるかな?
gen
そうだね、まずは新着情報なんかで使われる「ティッカー」から。
ami
「ティッカー」?
gen
電車のドアの上に電光掲示板で文字が流れたりする、あれを「ティッカー」って言うんだ。

出典:http://www.jquerynewsticker.com/

ami
テキストにリンクも貼れるんだね。
gen
小さいスペースで複数の情報を表示したいときに便利だよ。
ami
一度設置しちゃえば、テキストやリンクを差し替えるだけでいいんだね。
gen
そうだね。
jQueryを利用した、簡単に最新情報を表示できる一つの方法だよ。
ami
他にはどんなのがあるのかな?
gen
こんなのはどうだい?
スクラッチカードのような効果を表現するプラグインだよ。
ami
スクラッチカードって、コインでこすってアタリかハズレか確認できるアレ?
gen
そう、それを再現したものなんだ。
画像の上にカーソルを載せて、クリックしたまま動かすと、隠れている画像が現れるんだ。

(※FirefoxまたはChromeなどのHTML5 canvas対応ブラウザ、またはスマートフォンで見てください)

出典:http://www.websanova.com/plugins/scratchpad#.UZwiZz7m4tg

ami
これってどういう仕組なんだろう?
gen
隠れている画像とそれを覆う画像の2枚を用意して、覆う画像をカーソルでこすると、こすられたところに隠されたいる画像を表示するという仕組みだね。
ただし「HTML5」の「canvas]っていう描画機能を使用しているので、対応しているブラウザでないと表示できないんだ。

Canvasとは (外部サイト「HTML5.jp」を開きます)

ami
このプラグインは何に使えるかなー。
gen
ハズレ無しのプレゼント企画なんかのイベントとかでどうかな。もしくは全員プレゼントの景品の表示とか。
ami
貰う方も、ちょっとワクワクして楽しくなるかも!

次回をお楽しみに!