A jQuery plugin to animate a drawing image
ImageDrawer.js is a simple plugin for jQuery with 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 draws all the colors to the picture.
You can try ImageDrawer.js here.
To download the full plugin just click here or install it from bower:
bower install UstymUkhman/ImageDrawer.jsFirst, 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 pass the options object.
So let's suppose we have 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 of it, expressed in seconds
background: color to put on the picture while it's been drawing
callback: function to call once 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 left 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: path to pencil's image
You can check options' description and their data types here or visit the demo page and try to configure them by yourself.
ImageDrawer.js is licensed under the MIT license.