スクラッチ宝くじのように削ると見えてくるjQueryプラグイン「wScratchPad」を使うと面白いコンテンツが作れそうw
jQueryのプラグインを使えば、画像に様々な効果を加えたり、アニメーションさせて表示させたりいろんなことができます。
そんなプラグインは出揃った感がありますが、今回とてもユニークなプラグインを見つけたのでご紹介したいと思います。
「銀はがし」が できるプラグイン！
銀はがしといえば、皆さんご存知の宝くじなどでよくあるスクラッチカードがありますが、これと同じようなことをjQueryでできるようにしてくれるプラグイン「
wScratchPad」です。
「
wScratchPad」を使えば、画像をマスクした状態で表示しておき、
マウスで削っていくと徐々に中の画像 を見せるようなことができます。
簡単にスクラッチカードを削る間隔を味わうことができますよw
最初はマスクされて画像が何も表示されていません。
マウスで削っていくと隠れている画像が見えてきます。
用途としては、ブラウザ上で簡単なスクラッチくじを実現したい場合や、宝探しゲームのようなものや、レア画像を削って見せていくなどに使えそうで す。
仕 組みとしては、HTML5のCanvasを使って実現しているので、HTML5対応のブラウザでないと表示できません。
文章じゃわかりにくいので以下デモです。
使い方は
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のチュートリアル」を確認してください。
キャンペーン系のサイトや、ゲームなどに使えると思うので、興味がある方はチェックしてみてください。
使い方の詳細やファイルのダウンロードは以下。
sample:batako_san
0%
sample:tsuru_ken
0%
sample:ima
0%
↓スマホのタッチに対応させたい方は方こちら。
【おすすめのオンライン画像加工アプリ】
HTML5のCanvasを使った実用的なグラフィックツールをまとめました。こちらもあわせてチェックしてみてください。
HTML5で作られた驚異のフォトエディターまとめ
