Flyin'

by Brodingo

HTML

<canvas style="display:none" id="canvas" width="285" height="285"></canvas>
    <canvas style="display:none" id="canvas3" width="570" height="570"></canvas>
   <canvas id="canvas2" width="570" height="570">*** THIS BROWSER DOES NOT SUPPORT THE CANVAS ELEMENT ***</canvas>

CSS

html, body {
    overflow: hidden;
    height: 100%;
    margin: 0;
    padding: 0;
    text-align:center;
    font-size:24px;
}
canvas {
    
    position: absolute;
    width: 100%;
    height: 100%;
}

body {
    background-color: steelblue;
}

div {
    position: absolute;
}

div > b {

}

/*
div > b > b {

}

div > b > b > b {

}
*/

* {
    text-align: center;
}

b {
float: left;
    padding: 5px;
     -moz-transition: all 0.3s ease-out;  
       -o-transition: all 0.3s ease-out;  
  -webkit-transition: all 0.3s ease-out;  
      -ms-transition: all 0.3s ease-out;  
          transition: all 0.3s ease-out;  
}

b:before {
    content: '✈';
    color: #fff;
}

b + b {
    margin: 4px 0 0 4px;
}

b b b b:nth-of-type(2n) {
   -webkit-animation-name: pulse2; 
   -webkit-animation-duration: 2s; 
   -webkit-animation-iteration-count: infinite; 
   -webkit-animation-timing-function: ease-in-out; 
}

b b b b b:nth-child(3n-1) {

}

b b b b:nth-child(4n) {

}

b b b b:nth-child(5n+2) {

}

b b b b b b b:nth-child(2n+1) {
   
   
}

b b b b b b b:nth-child(3n+1) {
   -webkit-animation-name: pulse; 
   -webkit-animation-duration: 5s; 
   -webkit-animation-iteration-count: infinite; 
   -webkit-animation-timing-function: ease-in-out; 
}

b b:hover > b {
    -webkit-transform: scale(2) translate3d(0, 0, 0);

}

b:hover + b > b {
    -webkit-transform: scale(0.8) translate3d(0, 20%, 0);
}

b:hover + b + b > b {
    -webkit-transform: scale(1) translate3d(0, 50%, 0);
}

b b b:hover + b b {
    -webkit-transform: scale(1) translate3d(-50%, -50%, 0);
}

b b:hover b + b + b b {
    -webkit-transform: scale(1) translate3d(50%, 0, 0);
}


@-webkit-keyframes pulse { 
    0% { 
        -webkit-transform: scale(1) translate3d(0, 0, 0);
    } 
    50% { 
        -webkit-transform: scale(2) translate3d(0, -10%, 0);
    } 
    100% { 
        -webkit-transform: scale(1) translate3d(0, 0, 0);
    } 
}

@-webkit-keyframes pulse2 { 
    0% { 
        -webkit-transform: scale(1)...

JavaScript

// Randomly nest some divs
// http://twitter.com/cowboy/status/65845594400362496

function createPage() {
    var page = $('<div/>').appendTo('body');
    (function(s, n) {
        while (n--) {
            s.push($('<b/>').appendTo(s[~~ (Math.random() * (s.length - 1))]));
        }
    })([page], 200);
    return page;
}

var lastPage;
(function loopy() {
    lastPage && lastPage.fadeOut(1000);
    lastPage = createPage().hide().fadeIn(1000).delay(4000).queue(function(next) {
        loopy();
        next();
    });
})();

// The canvas element we are drawing into.      
			var	$canvas = $('#canvas');
			var	$canvas2 = $('#canvas2');
			var	$canvas3 = $('#canvas3');			
			var	ctx2 = $canvas2[0].getContext('2d');
			var	ctx = $canvas[0].getContext('2d');
			var	w = $canvas[0].width, h = $canvas[0].height;		
			var	img = new Image();	
			
			// A puff.
			var	Puff = function(p) {				
				var	opacity,
					sy = (Math.random()*285)>>0,
					sx = (Math.random()*285)>>0;
				
				this.p = p;
						
				this.move = function(timeFac) {						
					p = this.p + 0.3 * timeFac;				
					opacity = (Math.sin(p*0.05)*0.5);						
					if(opacity <0) {
						p = opacity = 0;
						sy = (Math.random()*285)>>0;
						sx = (Math.random()*285)>>0;
					}												
					this.p = p;																			
					ctx.globalAlpha = opacity;						
					ctx.drawImage($canvas3[0], sy+p, sy+p, 285-(p*2),285-(p*2), 0,0, w, h);								
				};
			};
			
			var	puffs = [];			
			var	sortPuff = function(p1,p2) { return p1.p-p2.p; };	
			puffs.push( new Puff(0) );
			puffs.push( new Puff(20) );
			puffs.push( new Puff(40) );
			
			var	newTime, oldTime = 0, timeFac;
					
			var	loop = function()
			{								
				newTime = new Date().getTime();				
				if(oldTime === 0 ) {
					oldTime=newTime;
				}
				timeFac = (newTime-oldTime) * 0.1;
				if(timeFac>3) {timeFac=3;}
				oldTime = newTime;						
				puffs.sort(sortPuff);							
				
				for(var...