Image Drawing Effect With jQuery And CSS3 - ImageDrawer.js

ImageDrawer.js is a lightweight jQuery plugin used for progressively draw a specified picture on your webpage using CSS3 animations.

How to use it:

1. Include the latest version of jQuery library and the jQuery ImageDrawer.js plugin on the webpage.

<link rel="stylesheet" href="css/imagedrawer.css">
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="script/imagedrawer.js"></script>

2. Insert an image into your webpage.

<div id="container">
  <img id="example" src="img.jpg">
</div>

3. Just call the function drawImage(); on the top element and the plugin will do the rest.

$('div#container').drawImage();

4. Specify the duration it's take to draw the entire picture.

$('div#container').drawImage({
  duration: 20,
});

5. Instead of specifying the duration of the whole animation, it's also possible to set the duration of single drawing phases:

$('div#container').drawImage({
  duration: { 
    borderPencil: 6, 
    pencilShades: 4,
    colorShades:  4, 
    fullColors:   6 
  },
});

5. Change the default background color:

$('div#container').drawImage({
  background: '#fff'
});

6. More plugin options.

$('div#container').drawImage({
  duration: { 
    borderPencil: 6, 
    pencilShades: 4,
    colorShades:  4, 
    fullColors:   6 
  },

  // function to execute after the last phase
  callback: function(){},

  // background color for image while it's been drawing
  background: '#FFF',

  pencil: {
    width     : '50px', // pencil image width
    height    : '50px', // pencil image height
    marginTop : -40, // initial margin top distance
    marginLeft: -15, // initial margin left distance
    disappear : 5, // seconds for a disappearing pencil animation
    fromBottom: true, //  if setted to "true" the pencil will start drawing from right bottom corner of the image ("false" by default)
    invertAxis: false, // if setted to "true" the pencil will draw vertically, if "false" - horizontally ("false" by default)
    src       : './img/pencil.png' // path to the pencil image
  }
});

Changelog:

2020-05-11

• JS updated

2016-03-20

• background color bug fix

2016-03-19

• Array Style Fix

2016-02-27

• Version Update with new pencil options

2016-02-26

• Pencil animation bug fix

2016-02-24

• updated with requestAnimationFrame

---

This awesome jQuery plugin is developed by UstymUkhman. For more Advanced Usages, please check the demo page or visit the official website.