「wScratchPad」スクラッチのように削ると画像が見えてくるjQueryプラグイン

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

 

 

jQueryのプラグインを使えば、画像に様々な効果を加えたり、アニメーションさせて表示させたりいろんなことができます。 そんなプラグインは出揃った感がありますが、今回とてもユニークなプラグインを見つけたのでご紹介したいと思います。

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

銀はがしといえば、皆さんご存知の宝くじなどでよくあるスクラッチカードがありますが、これと同じようなことをjQueryでできるようにしてくれるプラグイン「wScratchPad」です。 「wScratchPad」を使えば、画像をマスクした状態で表示しておき、 マウスで削っていくと徐々に中の画像 を見せるようなことができます。

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

最初はマスクされて画像が何も表示されていません。

 

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

   

用途としては、ブラウザ上で簡単なスクラッチくじを実現したい場合や、宝探しゲームのようなものや、レア画像を削って見せていくなどに使えそうで す。 仕 組みとしては、HTML5のCanvasを使って実現しているので、HTML5対応のブラウザでないと表示できません。 文章じゃわかりにくいので以下デモです。

DEMO

使い方はwScratchPad.jsとjQueryを合わせて読み込みます。

例としてソースは以下のようになります。

HTML - head

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/wScratchPad.js"></script>
<script type="text/javascript">
 $("#foo").wScratchPad({
  width: 210,
  height: 100,
  image: 'images/image.jpg'
  color: '#ff0000',
  cursor: 'images/cursor.png',
  size: 5
 });
</script>

※パスなどは環境に合わせて書き換えてください。

上記ソースのように記述すると、#fooが指定された要素にスクラッチカードのような機能を実装できます。 オプションでサイズ、表示される 画像、マスクの色、削る際のサイズなどを指定でき、カーソルの画像もオプションで変更することができます。 例えば、コインの画像を使用してマスク 色をシルバーとかにすれば、本当のスクラッチカードのようにすることもできますね。 また、どれぐらい削ったかを取得する機能もついており、70％以上削れたら何かを表示するだとか、50％削ったらマスクを解除するなんてこともできます。

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

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

使い方の詳細やファイルのダウンロードは以下。

  websanova / wScratchPad  

 

sample:batako_san

0%

sample:tsuru_ken

0%

sample:ima

0%

↓スマホのタッチに対応させたい方は方こちら。

jQueryでスクラッチカードを実現する wScratchPad をスマホ対応にしてみた

【おすすめのオンライン画像加工アプリ】

HTML5のCanvasを使った実用的なグラフィックツールをまとめました。こちらもあわせてチェックしてみてください。

HTML5で作られた驚異のフォトエディターまとめ