WordPressアップデートによるテーマファイル構成の不具合により、現在は仮のテーマで表示しています。
記事など読みづらいところが多々あると思いますがご了承いただけると幸いです。
鋭意修正中です…

スクラッチカードの様な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なので
ゲーム的な要素として何かおもしろいことができそうな気もします。

何かの際に是非。。。

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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です