Touch-enabled Virtual Scratch Card With JavaScript And Canvas – Touch2Reveal

Category: CSS & CSS3 , Image | November 5, 2016
Author:mattlohkamp
Views Total:1,317 views
Official Page:Go to website
Last Update:November 5, 2016
License:MIT

Preview:

Touch-enabled Virtual Scratch Card With JavaScript And Canvas – Touch2Reveal

Description:

Touch2Reveal is a tiny, dependency-free JavaScript library that has the ability to reveal the hidden with mouse and touch interactions. Similar to the Scratch Card game.

See also:

How to use it:

Put both Touch2Reveal.css and Touch2Reveal.js into the webpage.

<link rel="stylesheet" href="Touch2Reveal.css">
<script src="Touch2Reveal.js"></script>

Create an empty DIV container with an unique ID as this:

<div id="Touch2Reveal"></div>

Create a new Touch2Reveal object and specify the before / after images.

var touch2reveal;
window.onload = function(){
  touch2reveal = new Touch2Reveal(document.getElementById('Touch2Reveal'),'before.gif','after.jpg',{
    // options here
  });
}

Possible options with default values.

brushSize:window.innerWidth / 20,
softBrush:true,
revealTarget:{},
ratioToShow:.5,
onReveal:function(){}

You Might Be Interested In:


Leave a Reply