Chrome Life

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

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

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

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

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

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

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

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

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

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

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

仕組みとしては、HTML5Canvasを使って実現しているので、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のチュートリアル」を確認してください。

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

それでは、また!