cool blur in effect

1 files changed, 39 insertions, 13 deletions

diff --git a/views/index.ejs b/views/index.ejs
index 0a46120..71c8321 100644
--- a/views/index.ejs
+++ b/views/index.ejs
@@ -151,6 +151,8 @@
 				-moz-transform: translate3d(0, -60px, 0);
 				-webkit-transform: translate3d(0, -60px, 0);
 				transform: translate3d(0, -60px, 0);
+				color:transparent;
+				
 			}
 
 			30% {
@@ -160,6 +162,8 @@
 				-moz-transform: translate3d(0, 5px, 0);
 				-webkit-transform: translate3d(0, 5px, 0);
 				transform: translate3d(0, 5px, 0);
+				text-shadow:0 0 30px #888;
+				color:transparent;
 			}
 
 			60% {
@@ -168,6 +172,8 @@
 				-moz-transform: translate3d(0, -2px, 0);
 				-webkit-transform: translate3d(0, -2px, 0);
 				transform: translate3d(0, -2px, 0);
+				
+				
 			}
 
 			100% {
@@ -187,6 +193,8 @@
 				-moz-transform: translate3d(0, -40px, 0);
 				-webkit-transform: translate3d(0, -40px, 0);
 				transform: translate3d(0, -40px, 0);
+				color:transparent;
+				
 			}
 
 			30% {
@@ -196,6 +204,8 @@
 				-moz-transform: translate3d(0, 5px, 0);
 				-webkit-transform: translate3d(0, 5px, 0);
 				transform: translate3d(0, 5px, 0);
+				text-shadow:0 0 30px #888;
+				color:transparent;
 			}
 
 			100% {
@@ -318,6 +328,19 @@
 			}
 
 		}
+		
+		@-webkit-keyframes d {
+			40% {
+				opacity: 0.4;
+
+			}
+
+			60% {
+				color: #999;
+
+			}
+
+		}
 				ol li:nth-child(1){
 					-webkit-animation-name: b;
 					-webkit-animation-duration: 2.2s;
@@ -395,11 +418,12 @@
 			font-size:50px;
 			margin:20px 0 0 0;
 			letter-spacing: 12px;
+
 		}
 
 		h2 {
 			font-family: 'Julius Sans One', sans-serif;
-			-webkit-animation-name: a;
+			-webkit-animation-name: b;
 			-webkit-animation-duration: 2s;
 			-webkit-animation-iteration-count: 1;
 			-webkit-animation-delay: 0s;
@@ -445,6 +469,11 @@
 				background-size: cover;
 				cursor:url(https://s3.amazonaws.com/luckyplop/52d5f60fde3d8562ad566838e0e09ca52725bb09.gif), default;
     	}
+			header {
+				position:relative;
+				z-index:2;
+
+			}
     	.cursor {
     		position: absolute;
     		bottom: 50%;
@@ -453,6 +482,7 @@
     		height: 32px;
     		margin-bottom: -9999px;
     		margin-right: -9999px;
+				z-index:0;
 				-webkit-transform: translateZ(0);
 				-webkit-touch-callout: none;
 				-webkit-user-select: none;
@@ -479,6 +509,7 @@
 				font-size: 12px;
 				color: #333;
 				font-family: 'Julius Sans One', sans-serif;
+				z-index:2;
 			}
 			.cursor span:after {
 				content: "15:33";
@@ -490,22 +521,13 @@
 			.cursor.idle span {
 				color: transparent;
 			}
-			.cursor span:after {
-				content: "15:33";
-				margin-left: 25px;
-				color: transparent;
-				display: block;
-				float: left;
-			}
+
 			ol{
 				list-style:none;
 				padding:0;
 				
 				margin:0;
-				-webkit-animation-name: b;
-				-webkit-animation-duration: 2s;
-				-webkit-animation-iteration-count: 1;
-				-webkit-animation-delay: 0s;
+
 			}
 	
 			.fbutton {
@@ -534,6 +556,7 @@
 				bottom:10px;
 				left:0;
 				width:100%;
+				
 			}
 			.okfocus img {
 				width:100px;
@@ -560,13 +583,16 @@
 		<p>currently waiting</p>
 		<ol id="users"></ol>
 -->
+<header>
 		<h3>high scores</h3>
 		<ol id="scores"></ol>		
 		 <% if (!currentUser) { %>
 		<a href="/auth/facebook"class="fbutton"></a><br>
 				<% } %>
+				<a target="_blank" href="http://okfoc.us/"class="okfocus"><img src="/images/okfocus_logo.png" alt="OKFocus"></a>
+
+</header>
 		<div id="cursors"></div>
-		<a target="_blank" href="http://okfoc.us/"class="okfocus"><img src="/images/okfocus_logo.png" alt="OKFocus"></a>
 
   </body>
 </html>