Pixelate Hover Effects

by Daehyun Im

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.5/TweenLite.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.5/TimelineMax.min.js"></script>
<div class="parent">
  <img data-pixelate src="http://images6.fanpop.com/image/photos/38500000/Mario-super-mario-bros-38533027-599-337.jpg">
</div>

CSS

.parent {
	width: 599px;
	height: 337px;
	margin: 32px auto 0;
  position: relative;
  
  transform-origin: 50% 50%;
}

.parent canvas {
  position: absolute;
  top: 0;
	left: 0;
}

.parent:hover {

}

JavaScript

/*
 * hover effects by pixelate
 * @reference http://e3.nintendo.com/
 * @use [TweenLite.js, TimelineMax.js, jQuery.js]
 */

var app = {};
app.pixelhover = (function() {
	function pixelate() {
  	var options = {
    	value: 0.06,
      duration: 0
    };
    var element = this,
    		elementParent = element.parentNode;
    
    var imgWidth = element.width,
    		imgHeight = element.height,
        canv = document.createElement('canvas');

    canv.width = imgWidth;
    canv.height = imgHeight;
    
    var ctx = canv.getContext('2d');
    
    ctx.mozImageSmoothingEnabled = false;
    ctx.webkitImageSmoothingEnabled = false;
    ctx.imageSmoothingEnabled = false;
    
    try {
    	ctx.drawImage(element, 0, 0, canv.width, canv.height);
    } catch(e) {
    	//
    }
    
    if (!$(elementParent).find('canvas').length) {
    	elementParent.insertBefore(canv, element);

      var thisBlur = { value: 1 };
      var pixelTimeline = new TimelineMax({ paused: true })
      	.to(thisBlur, options.duration, {
        	value: options.value,
          onStart: function() {
          	canv.style.display = 'block';
          },
          onUpdate: function() {
          	var blurHeight = imgHeight * thisBlur.value,
            		blurWidth = imgWidth * thisBlur.value;
            ctx.drawImage(element, 0, 0, blurWidth, blurHeight);
            ctx.drawImage(canv, 0, 0, 
            	blurWidth, blurHeight, 0, 0, 
              canv.width, canv.height
            );
          },
          onComplete: function() {},
          onReverseStart: function() {},
          onReverseComplete: function() {
          	element.style.display = 'block';
            canv.style.display = 'none';
            ctx.drawImage(element, 0, 0, imgWidth, imgHeight);
          }
        }
      );

      $(elementParent).on('mouseenter', function(e) {
				pixelTimeline.reverse();
      });
      
      $(elementParent).on('mouseleave', function(e) {
      	pixelTimeline.play();
      });
      
     ...