Full Screen Scratch off Background Effect

I'm working on a project and need some help with a special HTML5/ Jquery element.

What I need is a full screen background image, that reveals areas of the image below as you hover over it. Kind of in the style of a scratch off card.

I've found a few examples below, however I need some modifications to their implementation

[url removed, login to view]

[url removed, login to view]

Modifications Needed:

1. There will be 2 images stacked on top of each other: both at 100% height 100% width of the browser

2. The images need to match up exactly because it will actually be 2 versions of the same image

3. The 'scratch off' needs to be triggered by simply hovering over an area (rather than clicking, holding and moving)

4. I would like the area's that have been scratched off to fade back in to the original image after a few seconds of being revealed (we will have to play with the timing of this)

5. There will be a simple navigation list on top of this, so that still needs to function.

Additional things I would like, but am not sure is possible with html5/jquery implementation

[url removed, login to view] I would like the area scratched off to have a more brush like feel, rather than just the solid circle in the examples.

Attached is an image illustrating the ideal effect, but if it is not possible I am open to suggestions.


Compétences : HTML5, jQuery / Prototype

en voir plus : html5 scratch, jquery scratch, html5 background effect, html5 scratch effect, scratch jquery, jquery canvas scratch, scratch effect html5, jquery scratch effect, scratch html5, scratch card html5, html5 canvas scratch, jquery scratch card, jquery scratch plugins, jquery image scratch effect, full screen scratch, scratch effect full screen, jquery scratch image, full screen background html5, prototype help, play html 5, jquery full, ideal image, html5 play, element 14, background 50

Concernant l'employeur :
( 18 commentaires ) Delhi, United States

Nº du projet : #1628201

Décerné à:


Hi, I'm HTML5 programmer experienced in interactive graphics. Please, read PM for details and sample work.

%selectedBids___i_sum_sub_7% %project_currencyDetails_sign_sub_8% USD en 3 jours
(12 Commentaires)

11 freelance font une offre moyenne de $146 pour ce travail


I'm ready to create the effect. Please check PM.

%bids___i_sum_sub_35% %project_currencyDetails_sign_sub_36% USD en 2 jours
(12 Commentaires)

Hi, jesshamilt0n. I can do it. Please check PM. Thanks and regards.

%bids___i_sum_sub_35% %project_currencyDetails_sign_sub_36% USD en 2 jours
(8 Commentaires)

Ready to start now!

%bids___i_sum_sub_35% %project_currencyDetails_sign_sub_36% USD en 2 jours
(10 Commentaires)

pro in [url removed, login to view] check private message.

%bids___i_sum_sub_35% %project_currencyDetails_sign_sub_36% USD en 3 jours
(7 Commentaires)

Hi, I have the required skills to complete this project in a professional manner, All payments through Milestone Payment... Online 16 Hours a day, Can start right away . I sent some of my Wordpress project works in PMB Plus

%bids___i_sum_sub_35% %project_currencyDetails_sign_sub_36% USD en 7 jours
(9 Commentaires)

I can do this for you. Please check PM for details...:)

%bids___i_sum_sub_35% %project_currencyDetails_sign_sub_36% USD en 2 jours
(0 Commentaires)

Hi, Interested in working on this assignment.

%bids___i_sum_sub_35% %project_currencyDetails_sign_sub_36% USD en 2 jours
(0 Commentaires)

HI sir.. i am very interesting about your job.

%bids___i_sum_sub_35% %project_currencyDetails_sign_sub_36% USD en 2 jours
(0 Commentaires)

Hello Sir, What is the status Sir ,so far. PLease respond

%bids___i_sum_sub_35% %project_currencyDetails_sign_sub_36% USD en 2 jours
(0 Commentaires)

Your project is doable and very interesting. HTML5 canvas can do what you want. It in fact it can be made do almost any 2d operation you can think of. --== Please allow me to submit a proof of concept before choosing Plus

%bids___i_sum_sub_35% %project_currencyDetails_sign_sub_36% USD en 2 jours
(0 Commentaires)