スクラッチカードの様なUIを実装できるjQueryプラグイン「jQuery Scratchie Plugin」

あまりサイト上で使用する機会はないかもしれませんが、
スクラッチカードのようにマウス操作（ドラッグ）で画像を削ることで
背面に配置している画像を表示することができる「jQuery Scratchie Plugin」がおもしろかったのでご紹介。

≫jQuery Scratchie Plugin » alexweber.com.br

上記リンク先ページにある動作デモを実際試してみると、、、

jQuery Scratchie Plugin

これが元画像。
この画像をドラッグして削っていくと。

このような感じに上に配置した画像が削られ、
背面に配置した画像が出てきます。

使用する画像やドラッグ時の画像などに加え、
スクラッチ完了後に何かアクションを起こさせるコールバックも
オプションで用意されています。

SCRIPTの記述は以下。（プラグインページチュートリアルより）

// executes the plugin on the selected div
// the plugin accepts a multitude of parameters but can be executed with
// a minimal configuration

$(document).ready(function(){
	$('#raspadinha').scratchie({
    	target : 'target',
        img : 'prize.jpg',
        imgHeight : 200, // target (prize) img height
        imgWidth : 400, // target (prize) img width
        title : 'Try your luck!',
        fillImg : 'overlay.jpg',
        requireMouseClick : false,
        callback: function(){
        	alert('Congratulations!');
        }
	});
});

今まであまり見たことがないUIなので
ゲーム的な要素として何かおもしろいことができそうな気もします。

何かの際に是非。。。