#jQuery Scratch Plugin
A lightweight jQuery plugin to create single or multiple scratch on images.
Don't use external images, the canvas can't work with that
Available options with notes, the values here are the defaults.
$('#elem').scratchPlugin({
scratchRadius: 15, // the radius to the cursor circle you make
complete: function ($elem, percentScratched) { // get the current element and the percentage scratched
// do things
}
});
Include the following file after jQuery
<script type="text/javascript" src="./ScratchPlugin.js"></script>
Create an element with data options to define the images you want in foreground and background
<div class="elem win" id="elem1" data-background-image="public/img/medal.png"
data-foreground-image="public/img/box.png"></div>
<div class="elem lose" id="elem2" data-background-image="public/img/medal.png"
data-foreground-image="public/img/box.png"></div>
Then, launch the plugin to each html elems
$(".elem").scratchPlugin({
scratchRadius: 15,
complete: function ($elem, percentScratched) {
// handle example
if ($elem.hasClass('win')) {
alert('You win !');
}
}
});