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のチュートリアル」を確認してください。
キャンペーン系のサイトや、ゲームなどに使えると思うので、興味がある方はチェックしてみてください。
それでは、また!