jQuery pixelate image effect – pixelate.js

Pixelating an image using jQuery pixelate image plugin – a little bit of fun with JavaScript and HTML5 Canvas. The original image will appear on mouse over.

jQuery pixelate image with pixelate.js plugin

It’s a simple library and jQuery plugin to pixelate any set of images, and optionally reveal them on hover.

pixelate.js - jQuery pixelate image effect
pixelate.js – jQuery pixelate image effect

Usage

pixelate.js can be used with or without jQuery:

// following two lines are near identical
$('img').pixelate();
document.querySelector('img').pixelate();

We can also use HTML5 data attributes:

<img src="test.jpg" width="200" height="200" data-pixelate>

Options

value – the percentage of pixelation to perform, a value between 0 and 1

reveal – reveal the image on hover and remain revealed if clicked

revealonclick – reveal the image on click. When combined with reveal, it will remain revealed after being clicked.

These options may be specified by data tags, e.g.:

<img src="img.jpg" data-pixelate data-value="0.5" data-reveal="false">

or JS:

$('img#myimage').pixelate({ value: 0.5, reveal: false });

License: MIT

Demo:

http://43081j.com/pixelate

GitHub:

https://github.com/43081j/pixelate.js

You may also like:

Beautiful and realistic JavaScript raindrops effect – Rainyday.js

jQuery smoke effects – Audero Smoke Effect plugin

Have fun!

Share:Share on Facebook1Share on Google+1Tweet about this on TwitterShare on LinkedIn1Pin on Pinterest1