ImageDrawer.js
A jQuery plugin to animate a drawing image
ImageDrawer.js is a simple plugin of jQuery and CSS animations which can be called as described below, to imitate an accelerated drawn image.
The drawing process is made of two parts: the first one defines all image borders by using "a black pencil" and the second one gives all the colors to the picture.
Demo
You can try ImageDrawer.js here.
Download
To download the full plugin just click here or install it from bower:
bower install UstymUkhman/ImageDrawer.jsRequirements
Usage
First, you have to include both, JavaScript and CSS files in your project:
<head> <script type="text/javascript" src="http://code.jquery.com/jquery-1.12.0.min.js"></script> <script type="text/javascript" src="js/imagedrawer.js"></script> <link rel="stylesheet" type="text/css" href="css/imagedrawer.css" /> </head>or minified versions of those files
<head> <script type="text/javascript" src="http://code.jquery.com/jquery-1.12.0.min.js"></script> <script type="text/javascript" src="js/imagedrawer.min.js"></script> <link rel="stylesheet" type="text/css" href="css/imagedrawer.min.css" /> </head>Once that is done, to actually use the plugin, you have to call .drawImge() function by selecting the parent element of the picture you want to draw and passing the options object.
So lets suppose this is our HTML:
<body> <div id="container"> <img id="imageto-draw" src="./img/myImage.jpg" /> </div> </body>So, the JS part would be like this:
$('#container').drawImge(options);The variable options is just an object which may contain all or some of this parameters:
duration: drawing time for the whole animation or for each step if it, expressed in seconds
background: color to put on the picture while it's been drawing
callback: function to call onece the painting is over
pencil: object of options for a drawing pencil image
 width: pencil image width
 height: pencil image height
 marginTop: pencil image top margin on the picture
 marginLeft: pencil image top margin on the picture
 disappear: seconds it's take to make the pencil disappear once the drawing is finished
 fromBottom: start drawing from the bottom of the picture
 invertAxis: draw image vertically
 src: pencil image path
You can check better options' description and their data types here or visit the demo page and try to configure them.
License
ImageDrawer.js is licensed under the MIT license.
