diff options
| author | Ryder Ripps <theryderproject@gmail.com> | 2013-01-23 19:01:10 -0500 |
|---|---|---|
| committer | Ryder Ripps <theryderproject@gmail.com> | 2013-01-23 19:01:10 -0500 |
| commit | e5a45eba8a382c2c5f943ee8ecb9019bf1c54a6e (patch) | |
| tree | 1ae9cfe6e80442afd8826669a17536d959397383 | |
| parent | 460fe570302ca7f53ddf62f08f887fd733df14c2 (diff) | |
cool blur in effect
| -rw-r--r-- | views/index.ejs | 52 |
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> |