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


Author: mattlohkamp
Views Total: 1,367 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(){}

See also  Pure Html / CSS Responsive Carousel - Cari

Leave a Reply

Your email address will not be published. Required fields are marked *