Author: | Porcupine021 |
---|---|
Views Total: | 7,077 views |
Official Page: | Go to website |
Last Update: | November 12, 2018 |
License: | MIT |
Preview:

Description:
scratch-it is a JavaScript library to create a responsive, mobile-friendly lottery ticket that reveals the hidden image by scratching off the overlay.
See also:
- Scratch Card With Pure JavaScript – ScratchCard
- Virtual Scratch Card With JavaScript And Canvas – Touch2Reveal
How to use it:
Embed an image into your scratch ticket.
<div id="scratch"> <img src="image-to-reveal.jpg"> </div>
Insert the JavaScript file ‘ScratchIt.min.js’ into the document.
<script src="ScratchIt.min.js"></script>
Initialize the scratch-it library and specify the container element, overlay image, and brush image.
- el: The parent DOM element that the canvas will be appended to
- overlayUrl: The URL to the image which will be displayed
- brushUrl: The URL to the image which will act as the brush for erasing the content of the overlay image
if(ScratchIt.isSupported()){ // ScratchIt(el, overlayUrl, brushUrl) ScratchIt(document.getElementById('scratch'), './images/overlay.png', './images/brush1.png'); }
Applies an event handler to the scratch ticket that will be triggered once 50% of the overlay has been removed.
- callback: A function to be called after a certain percentage of the overlay image has been removed.
- threshold: A percentage between 0 and 100. This percentage of pixels must be visible to the user before the revealCallback will be triggered.
function onReveal(){ // do something } if(ScratchIt.isSupported()){ // ScratchIt(el, overlayUrl, brushUrl, onReveal, revealPercent) ScratchIt(document.getElementById('scratch'), './images/overlay.png', './images/brush1.png', onReveal, 50); }
Changelog:
11/12/2018
- fixed for vue.js
Is it scratchIt library is available..??
Pls provide complete resources..with explanation