ImageDrawer.js

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.

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.js

Requirements

jQuery Library

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 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.

License

ImageDrawer.js is licensed under the MIT license.

Badges

Extracted from project README