upReveal.js
upReveal.js makes the image reveal themselves by the motion of your mouse over them!
This demo shows you the upReveal effect.
Usage
Include jQuery from a CDN.
Download the plugin and include the script and style in your web page:
<link rel='stylesheet' href='URL_to/upReveal.css' type='text/css' media='all' />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- Inside the <head> -->
<script src="URL_to/upReveal.js"></script>
<!-- After the <body> -->
Use html data attribute to define your image source urls.
<article id="container1">
<canvas id="upReaveal1" data-num="1" data-bw="URL_black_and_white_IMG" data-color="URL_color_IMG" style="background-image:url( URL_color_IMG );" width="1200" height="800">
</canvas>
</article>Use the plugin on all canvas elements.
<script> $('canvas').upReveal(); </script>Via npm
Install it via npm :
npm install upreveal
Download
Download this plugin, the zip folder contain the script files and additional components.
upReveal.js is licensed under The MIT License (MIT) This license is also supplied with the release and source code. As stated in the license, absolutely no warranty is provided. For more infos, this license goes with the zipped folder. Feel free to download and make it better.