[JS]スクラッチカードみたいに削って下の画像を表示するスクリプト -Scratchie

画像をスクラッチカードみたいに削って、下の画像を表示するjQueryのプラグインを紹介します。

jQuery Scratchie
デモ

[ad#ad-2]

元の画像は下記のように表示されています。

カードを削る前

マウスのクリック・ドラッグ操作で削り、下の画像を表示することができます。

カードを削り中

[ad#ad-2]

jQuery Scratchieの実装

jquery.jsと当スクリプトを外部ファイルにし、下記のスクリプトを記述します。
スクリプトでは使用する画像、オーバレイの画像、画像のサイズ、title要素などを指定し、コールバック機能も実装されています。

JavaScript

$(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!');
		}
	});
});