Chrome Life

Chrome OS, Chrome Web Store などChrome関連の話題、Google+などの新しいGoogleサービス、HTML5, JavaScript, CSS3によるWebアプリ開発、ChromeBook、MacBook Air、クラウドの活用方法などを紹介

ホーム > JavaScript > スクラッチ宝くじのような削ると見えてくるjQueryプラグイン「wScratchPad」を使うと面白いコンテンツが作れそうw

スクラッチ宝くじのような削ると見えてくるjQueryプラグイン「wScratchPad」を使うと面白いコンテンツが作れそうw

jQueryのプラグインを使えば、画像に様々な効果を加えたり、アニメーションさせて表示させたりいろんなことができます。

そんなプラグインは出揃った感がありますが、今回とてもユニークなプラグインを見つけたのでご紹介したいと思います。

「銀はがし」ができるプラグイン!

銀はがしといえば、皆さんご存知の宝くじなどでよくあるスクラッチカードがありますが、これと同じようなことをjQueryでできるようにしてくれるプラグイン「wScratchPad」です。

wScratchPad」を使えば、画像をマスクした状態で表示しておき、マウスで削っていくと徐々に中の画像を見せるようなことができます。

簡単にスクラッチカードを削る間隔を味わうことができますよw

デモページにアクセスすると試すことができます。
最初はマスクされて画像が何も表示されていません。

マウスで削っていくと隠れている画像が見えてきます。

用途としては、ブラウザ上で簡単なスクラッチくじを実現したい場合や、宝探しゲームのようなものや、レア画像を削って見せていくなどに使えそうです。

仕組みとしては、HTML5のCanvasを使って実現しているので、HTML5対応のブラウザでないと表示できません。

コードは、下記のように指定するだけです。

$("#wScratchPad").wScratchPad({
    width: 210,
    height:100,
    image: "/path/to/image.jpg"
    color: "#DD3388",
    size: 5,
    scratchMove: function(e, percent) {
        if(percent > 80) {
            //do something
        }
    }
});

スクラッチカードのサイズや、画像、マスクの色、削るサイズなどが指定できます。

どのぐらい削れたかをコールバックで取得する機能もあるので、全体の何%か削らないとダメみたいなチェックもできますね。

詳しくは、「wScratchPadのチュートリアル」を確認してください。

キャンペーン系のサイトや、ゲームなどに使えると思うので、興味がある方はチェックしてみてください。

それでは、また!

【おすすめのオンライン画像加工アプリ】
HTML5のCanvasを使った実用的なグラフィックツールをまとめました。こちらもあわせてチェックしてみてください。
HTML5で作られた驚異のフォトエディターまとめ

タグ: , ,

新着記事

この記事の読者におすすめの記事

このブログを購読しませんか?

RSSリーダーを使うと、このブログの更新情報がすぐに入手できるようになります。
このブログのRSSをRSSリーダーに登録すれば、更新されるたびに記事の本文を読むことができます。

Twitterでもこのブログの更新情報や筆者が見つけた情報をつぶやいていますので、@opakenをフォローしていただけるとうれしいです。

Facebookのファンページも用意しています。こちらでも更新情報を配信しています。「いいね!」をクリックしてもらうだけで購読できます。