From e5a45eba8a382c2c5f943ee8ecb9019bf1c54a6e Mon Sep 17 00:00:00 2001 From: Ryder Ripps Date: Wed, 23 Jan 2013 19:01:10 -0500 Subject: cool blur in effect --- views/index.ejs | 52 +++++++++++++++++++++++++++++++++++++++------------- 1 file changed, 39 insertions(+), 13 deletions(-) (limited to 'views/index.ejs') 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% { @@ -317,6 +327,19 @@ } + } + + @-webkit-keyframes d { + 40% { + opacity: 0.4; + + } + + 60% { + color: #999; + + } + } ol li:nth-child(1){ -webkit-animation-name: b; @@ -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 @@

currently waiting

    --> +

    high scores

      <% if (!currentUser) { %>
      <% } %> + OKFocus + +
      - OKFocus -- cgit v1.2.3-70-g09d2