CodePen

HTML

            
              <body></body>
            
          
!

CSS

            
              body {
  
    margin: 0px;
    overflow: hidden;
  
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              /*
 * Copyright MIT © <2013> <Francesco Trillini>
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated 
 * documentation files (the "Software"), to deal in the Software without restriction, including without limitation 
 * the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and 
 * to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 
 * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, 
 * INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR 
 * PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE 
 * FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, 
 * ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 */

var GooglePixelate = {}; 
 
;(function(GooglePixelate, undefined) {
	
	var self = window.GooglePixelate || {}, canvas, context, pixels = [], beforeColors = ['#ffffff', '#f90344'], afterColors = ['#ffffff', '#4c8bff'], time = bomb = null, FPS = 60;
	var angle = 0;
	/*
 	 * Init.
	 */
	
	self.init = function() {
		
		var body = document.querySelector('body');
		
		canvas = document.createElement('canvas');
			
		canvas.width = innerWidth;
		canvas.height = innerHeight;
		
		canvas.style.backgroundColor = '#1a1a1a';
		canvas.style.position = 'absolute';
		canvas.style.top = 0;
		canvas.style.bottom = 0;
		canvas.style.left = 0;
		canvas.style.right = 0;
		canvas.style.zIndex = -1;	
		
        body.appendChild(canvas);
		
		// Browser supports canvas?
		if(!!(self.gotSupport())) {
		
			context = canvas.getContext('2d');
		
			// Event
			window.onresize = onResize;
		
			self.buildTexture();
			
		}
		
		else {
		
			console.error('Please, update your browser for seeing this animation.');
		
		}
        
	};
	
	/*
	 * On resize window event.
	 */
	
	function onResize() {
	
		canvas.width = window.innerWidth;
		canvas.height = window.innerHeight;
	
	}
	
	/*
	 * Checks if browser supports canvas element.
	 */
	
	self.gotSupport = function() {
	
		return canvas.getContext && canvas.getContext('2d');
	
	};
	
	/*
	 * Building texture.
	 */
	
	self.buildTexture = function() {
	
		// Let's start by drawing the original texture
		if(pixels.length === 0 && time === null) {
		
			time = bomb = new Date().getTime();
		
			context.font = '100px Lato, sans-serif';
			context.fillStyle = 'rgb(255, 255, 255)';		
			context.textAlign = 'center';
			context.fillText('hello', canvas.width * 0.5, canvas.height * 0.5);
			
			var surface = context.getImageData(0, 0, canvas.width, canvas.height);
			
			context.clearRect(0, 0, canvas.width, canvas.height);
			
			for(var width = 0, len1 = surface.width; width < len1; width += 8) {
			
				for(var height = 0, len2 = surface.height; height < len2; height += 8) {
			
					var color = surface.data[(height * surface.width * 4) + (width * 4) - 1];
						
					var angle = Math.random() * Math.PI * 2;	
						
					// The pixel color is white? So draw on it...
					if(color === 255) {
					
						pixels.push({ 
					
							x: width, 
							y: height, 
							vx: 1 + Math.random() * 20 * Math.cos(angle),
							vy: 1 + Math.random() * 20 * Math.sin(angle),
							beforeColor: beforeColors[~~(Math.random() * beforeColors.length)],
							afterColor: afterColors[~~(Math.random() * afterColors.length)],
							radius: 8,
							alpha: 0.0,						
							release: false, 
							reduce: false,
					
						});	
					
					}
		
				}
			
			}
		
		}
		
		else {
			
			// Reset 'em all
			if(pixels.length === 0 && currentText !== oldText) {
			
				pixels = []; 
			
				time = bomb = null;
				
				oldText = currentText;
				
			}
			
		}
	
		// Logic
		self.clear();
		self.update();
		self.render();
		
		requestAnimFrame(self.buildTexture);
	
	};
	
	/*
	 * Clear the whole screen.
	 */
	
	self.clear = function() {
	
		context.clearRect(0, 0, canvas.width, canvas.height);
	
	};
	
	/*
	 * Let's update the pixels.
	 */
	
	self.update = function() {
	
		for(var index = 0; index < pixels.length; index++) {
						
			var pixel = pixels[index];			
						
			pixel.alpha = Math.max(pixel.alpha - 0.02, 0.0) === 0.0 ? Math.min(Math.random(), 1.0) : pixel.alpha -= 0.02;
			
			/*if(!pixel.release) {
				
				// Wait 3 second before exploding
				if(new Date().getTime() - time > 3000) {
					
					if(new Date().getTime() - bomb > 1) {
					
						bomb = new Date().getTime();
						
						pixel.beforeColor = pixel.afterColor;
						pixel.release = true;
						pixel.reduce = true;
						
						pixel.radius = Math.random() * 12;
					
					}
					
				}
				
			}*/
			
			// Explosion
			if(pixel.release) {
			
				// Fly away
				pixel.x += pixel.vx;
				pixel.y -= pixel.vy;
				pixel.vy -= 0.20;
				
				if(pixel.reduce)
				
					pixel.radius = Math.max(pixel.radius - 0.08, 5);
				
				// Remove pixels
				if(pixel.x > canvas.width + pixel.radius || pixel.x < -pixel.radius || pixel.y > canvas.height + pixel.radius || pixel.y < -pixel.radius)
					
					pixels.splice(index, 1);
					
			}
			
		}
	
	};
	
	/*
	 * Let's render the pixels.
	 */
	
	self.render = function() {
			
		[].forEach.call(pixels, function(pixel, index) {
			
			var d = pixel.radius + Math.sin(angle + index) * 2;
			
			context.save();
			context.beginPath();
			context.globalAlpha = 1;
			context.strokeStyle = pixel.afterColor;	
			context.translate(pixel.x, pixel.y);
			context.arc(0, 0, d, 0, Math.PI * 2);
			context.stroke();
			context.restore();
			
		});
		
		angle += 0.2;
			
	};
	
	/*
	 * Distance between two points.
	 */
	
	self.distanceTo = function(pointA, pointB, angle) {
	
		var dx = Math.abs(pointA.x - pointB.x);
		var dy = Math.abs(pointA.y - pointB.y);
		
		return Math.sqrt(dx * dx + dy * dy);
	
	};
	
	/*
	 * Request new frame by Paul Irish.
	 * 60 FPS.
	 */
	
	window.requestAnimFrame = (function() {
	 
		return  window.requestAnimationFrame       || 
				window.webkitRequestAnimationFrame || 
				window.mozRequestAnimationFrame    || 
				window.oRequestAnimationFrame      || 
				window.msRequestAnimationFrame     || 
			  
				function(callback) {
			  
					window.setTimeout(callback, 1000 / FPS);
				
				};
			  
    	})();

	window.addEventListener ? window.addEventListener('load', self.init, false) : window.onload = self.init;
	
})(GooglePixelate);
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................