Pixelate.js demonstration

Data attributes

Pixelate.js initialized on image via data attributes

http://imgur.com/gallery/zjJAc

<img src="http://i.imgur.com/sAtUHoB.jpg"
     data-pixelate
     data-value="0.25"
     data-reveal_on_hover="true"
     data-reveal_on_click="true" />

JavaScript invocation

Pixelate.js initialized on image via method of element

http://imgur.com/gallery/zjJAc

document.getElementById('myimg').pixelate({
	value: 0.25,
	reveal_on_hover: true,
	reveal_on_click: true
})

Automate

Pixelate.js initialized on all new images appearing in DOM

http://imgur.com/gallery/zjJAc

<script src="pixelate.auto.min.js"></script>
<script>
	PixelateAuto({
		value: 0.1,
		reveal_on_hover: true,
		reveal_on_click: true
	});
</script>

Video

Pixelate.js works with videos too!

<video preload="auto" autoplay="autoplay" muted="muted" loop="loop"
       data-pixelate
       data-reveal_on_hover="true">
	<source src="//i.imgur.com/BAUDFBX.webm" type="video/webm">
	<source src="//i.imgur.com/BAUDFBX.mp4" type="video/mp4">
</video>