Canvas is for chumps.

Wilto · Dec 23, 2012 · 0bebb33 · 0bebb33
1 parent 57d82bc
commit 0bebb33
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 82 deletions.
diff --git a/css/dead.css b/css/dead.css
@@ -3,7 +3,7 @@ html {
 }
 body {
 	background: #ddd;
-	background: rgba(255,110,110, .8);
+	background: rgba(240,100,100, 1);
 	position: absolute;
 	height: 100%;
 	width: 100%;
@@ -13,30 +13,21 @@ body {
 body:after {
 	content: " ";
 	position: absolute;
+	opacity: .85;
 	top: 0;
 	left: 0;
 	width: 100%;
 	height: 100%;
 	z-index: 2;
-	background: -webkit-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 0.9) 100%);
+	background: -webkit-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 0.9) 100%), url(_img/static.gif);
-	background: -moz-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 0.9) 100%);
+	background: -moz-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 0.9) 100%), url(_img/static.gif);
-	background: -ms-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 0.9) 100%);
+	background: -ms-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 0.9) 100%), url(_img/static.gif);
-	background: -o-gradient(center, ellipse cover, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 0.9) 100%);
+	background: -o-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 0.9) 100%), url(_img/static.gif);
-	background: radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 0.9) 100%);
+	background: radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 0.9) 100%), url(_img/static.gif);
 }
-canvas {
-    z-index: 1;
-    position: absolute;
-    opacity: .8;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-}
-
 h1 {
 	color: #333;
-	color: rgba(50,50,50,.3);
+	color: rgba(200,50,50,.3);
 	text-shadow: 0 0 20px rgba(0,0,0,.5);
 	z-index: 3;
 	position: absolute;
@@ -48,27 +39,27 @@ h1 {
 	margin-left: -50%;
 	height: 200px;
 	text-align: center;
-	-webkit-animation: blur 2s linear infinite, blink 3s ease infinite;
+	-webkit-animation: blur 2s linear infinite, blink 4s ease infinite;
-	-moz-animation: blur 2s linear infinite, blink 3s ease infinite;
+	-moz-animation: blur 2s linear infinite, blink 4s ease infinite;
-	animation: blur 2s linear infinite, blink 3s ease infinite;
+	animation: blur 2s linear infinite, blink 4s ease infinite;
 }
 @-webkit-keyframes blur {
 	0% {
 		color: transparent;
-		text-shadow: 0 0 30px rgba(0, 0, 0, .5);
+		text-shadow: 0 0 30px rgba(20, 0, 0, .5);
 	}
 	33% {
-		text-shadow: 0 0 10px rgba(0, 0, 0, .4);
+		text-shadow: 0 0 10px rgba(15, 0, 0, .4);
 	}
 	36% {
-		text-shadow: 0 0 10px rgba(0, 0, 0, .2);
+		text-shadow: 0 0 10px rgba(25, 0, 0, .2);
 	}
 	66% {
-		text-shadow: 0 0 20px rgba(0, 0, 0, .4);
+		text-shadow: 0 0 20px rgba(15, 0, 0, .4);
 	}
 	100% {
 		color: transparent;
-		text-shadow: 0 0 40px rgba(0, 0, 0, .8);
+		text-shadow: 0 0 40px rgba(30, 0, 0, .8);
 	}
 }
 @-moz-keyframes blur {
@@ -117,7 +108,7 @@ h1 {
 		-webkit-transform: skewX(0deg);
 	}
 	21% {
-		-webkit-transform: skewX(-1deg);
+		-webkit-transform: skewX(-3deg);
 	}
 	35% {
 		opacity: 1;
@@ -143,7 +134,7 @@ h1 {
 		-webkit-transform: skewX(0deg);
 	}
 	21% {
-		-webkit-transform: skewX(-1deg);
+		-webkit-transform: skewX(-3deg);
 	}
 	35% {
 		opacity: 1;
@@ -169,7 +160,7 @@ h1 {
 		-webkit-transform: skewX(0deg);
 	}
 	21% {
-		-webkit-transform: skewX(-1deg);
+		-webkit-transform: skewX(-3deg);
 	}
 	35% {
 		opacity: 1;

diff --git a/index.html b/index.html
@@ -14,59 +14,5 @@
 </head>
 <body>
 	<h1>HTML5 is <strong>DEAD</strong></h1>
-	<canvas></canvas>
-
-	<script type="text/javascript">
-	// Adapted from http://codepen.io/moklick/pen/zKleC  
-
-	var psssh = ( function () {
-	        var canvas,
-	        	WIDTH,
-	        	HEIGHT,
-	        	screens = [],
-	        	ctx,
-	        	init = function () {
-					var canvas = document.getElementsByTagName( "canvas" )[ 0 ];
-
-					canvas.width = WIDTH = 400;
-					canvas.height = HEIGHT = 400;
-
-					ctx = canvas.getContext( "2d" );
-					ctx.fillRect( 0, 0, WIDTH, HEIGHT );
-
-					makeScreens();
-				},
-				makeScreens = function() {
-					for ( var i = 0; i < 4; i++ ) {
-						var imgData = ctx.getImageData( 0, 0, WIDTH, HEIGHT ),
-							pix = imgData.data;
-
-						for ( var p = 0, pl = pix.length; p < pl; p += 4 ) {
-							var color = ( Math.random() * 255 ) + 40;
-
-							pix[ p ] = color;
-							pix[ p + 1 ] = color;
-							pix[ p + 2 ] = color;
-						}
-						ctx.putImageData( imgData, 0, 0);
-						screens.push( imgData );
-					}
-
-					var j = 0;
-					setInterval( function() {
-						j = ( j == 3 ) ? 0 : j + 1;
-						ctx.putImageData( screens[ j ], 0, 0);
-					}, 30 );
-
-					return screens;
-				};
-
-	        return {
-	            init: init
-	        };
-	    }());
-
-	    psssh.init();
-    </script>
 </body>
 </html>