jQuery jScratchcard – Scratchcard effect on image
30 marzo 2010 by 
Giovanni
A simple jQuery plugin that implement a Scratchcard (Scratch card).
This is a screenshot:
Parameters:
- opacity – opacity step when hover – default {’opacity’: 0.2}
- color – start background color – default {color: ‘grey’}
- stepx – x block dimension – default {stepx: 10}
- stepy – y block dimension – default {stepy: 10}
- mousedown – if true the left button of mouse must be down – default {mousedown: true}
- callCallbackPerc – if valorized is the percent at which call callback – default: false
- callbackFunction – callback function – default null
In Jquery | 
12 Comments »
2 aprile 2010 alle 21:46
New version compatible with ie6 – ie7!
7 settembre 2010 alle 07:30
New version compatible with ie6 – ie7!
+1
26 novembre 2010 alle 16:50
Hi,
I have used the scratch banner and its working fine…Thank you so much for that…
I do have a query…
I need to have a text banner (instead of a plain image) which on scratch will display the image banner…
Kindly assist me in this regard….
29 novembre 2010 alle 12:59
You can simply apply jScratchcard to banner, instead of image.
15 dicembre 2010 alle 23:00
Giovani, you’re a JQuery guru
I’m running a facebook application and used flash for the scratch cards in the game.
I’ve hated the thought of using flash, and decided to find a better way, and I’d like to tell you your work was very inspiring!
I’m going to rewrite my app to entirely support JQuery and a modified version of your cards
I’ll send you a link as soon as It’s ready before releasing the game
thanks,
Mostafa Berg
18 aprile 2011 alle 00:26
Hey, this is a great plugin.
I want to use it to display 3 cards as a game. If the pics behind all match, they win something. I’m going to use PHP to generate the pics but I was wondering is there a method I can use to know when a certain amount, say 50% of the card has been scratched off?
20 aprile 2011 alle 05:53
Just for Matt: new version 1.0, two new options: callCallbackPerc and callbackFunction
See demo 2!
18 maggio 2011 alle 02:20
Wow, Grazie Giovanni! That is awesome.
Just one other question, to know if it’s possible : is there a way to have an image over the top instead of colour block
Exmaple: http://i52.tinypic.com/52xmqf.jpg
I’m not sure if it’s possible, I wondered, if the block over the top acted like one element then we could set that background-image but I guess it has to be lots of individual elements.
Kind regards
18 maggio 2011 alle 02:44
Hi Giovanni
Since my cover pieces are quite large, I simply sliced up the image and used the pieces as background-images for them:
count = 0
over += “<div …… background-image: url(cover/"+count+".jpg); …..
count++;
Seems to work
22 maggio 2011 alle 02:15
Hi Giovanni
Nice work !
A few months ago, I’ve extracted a similar script for touch devices. Here’s a working demo on ipad & iphone :
http://prizeetools.com/gratt/
But I wasn’t able to make it work on non-touch devices.
Do you think you could mix it with your script to get a universal scratch script ?
2 settembre 2011 alle 16:38
This is a brilliant script Giovanni!
What should I add/change to make it work on touch devices such as ipad & iphone?
Unfortunately the link of Tristan does not work anymore
Thank you in advance!
Rudy
9 agosto 2012 alle 06:58
I’m looking to use this in another project but would need it to work on iphone and ipad devices.
Is there a way to make it trigger on touch? so that it works mobile and desktop?