Scratch To Reveal A Hidden Picture Beneath – jQuery Eraser

A jQuery-powered eraser device that lets you scratch a picture to disclose a hidden picture beneath utilizing mouse motion or contact gestures, similar to a scratch card ought to.

That is usually used to advertise a services or products that requires the consumer to take motion earlier than viewing extra data.

See Additionally:

use it:

1. Embrace jQuery library and the jquery.eraser.js script on the web page.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/jquery.eraser.js"></script>

2. Add overlapping pictures to the web page.

<img id="overlay" src="overlay.jpg" />
<img id="beneath" src="beneath.png" />

#overlay {
  place: absolute;
  high: 0px;
  left: 0px;
  z-index: 1;
}

#beneath {
  place: absolute;
  high: 0px;
  left: 0px;
  z-index: 2;
}

3. Name the perform on the ‘beneath’ picture and carried out.

$('#beneath').eraser({
  // ...
});

4. Specify the comb dimension. Default: 40.

$('#beneath').eraser({
  dimension: 20,
});

5. Set off a perform when a erased ratio is reached.

$('#beneath').eraser({
  completeRatio: .65,
  completeFunction: myFunction,
});

6. API strategies.

// erases all canvas content material
$('#beneath').eraser( 'clear' ); 

// revert again to unique content material
$('#beneath').eraser( 'reset' ); 

// change the comb dimension
$('#beneath').eraser( 'dimension', 80 ); 

// allow or disable erasing
$('#beneath').eraser( 'allow/disable' ); 

// returns true if the eraser is enabled
$('#beneath').eraser( 'enabled' );

This superior jQuery plugin is developed by boblemarin. For extra Superior Usages, please test the demo web page or go to the official web site.