Permalink
Browse files

v1

  • Loading branch information...
0 parents commit 7fa6d6710ff483873efb8c7dcedca54898aa361d @madrobby committed Sep 24, 2010
Showing with 161 additions and 0 deletions.
  1. BIN 275382_eye_of_the_tiger_8bit.mp3
  2. +161 −0 index.html
  3. BIN sub.jpg
BIN 275382_eye_of_the_tiger_8bit.mp3
Binary file not shown.
161 index.html
@@ -0,0 +1,161 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>JS1K</title>
+ <style type="text/css" media="screen">
+ html {
+ height: 100%;
+ }
+ body {
+ -webkit-transform: perspective(800);
+ -webkit-transform-style: preserve-3d;
+ height: 100%;
+ overflow: hidden;
+ margin: 0;
+ background:
+ #5f6b7a no-repeat top center -webkit-gradient(radial, center top, 0, center top, 600, from(#7f8d9e), to(#5f6b7a));
+ }
+ @-webkit-keyframes bounce {
+ from {
+ -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
+ }
+ to {
+ -webkit-transform: rotateX(0deg) rotateY(-360deg) rotateZ(0deg);
+ }
+ }
+ @-webkit-keyframes rot {
+ from {
+ -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
+ }
+ to {
+ -webkit-transform: rotateX(0deg) rotateY(-360deg) rotateZ(0deg);
+ }
+ }
+ @-webkit-keyframes cube {
+ from {
+ -webkit-transform: rotateX(180deg) rotateY(0deg) rotateZ(-180deg) scaleX(0.2) scaleY(0.2) scaleZ(0.2);
+ }
+ 50% {
+ -webkit-transform: rotateX(0deg) rotateY(180deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
+ }
+ to {
+ -webkit-transform: rotateX(-180deg) rotateY(360deg) rotateZ(180deg) scaleX(0.2) scaleY(0.2) scaleZ(0.2);
+ }
+ }
+ @-webkit-keyframes cubeH {
+ from {
+ -webkit-transform: translate3d(0,0,50px) rotateX(180deg) rotateY(0deg) rotateZ(-180deg) scaleX(0.2) scaleY(0.2) scaleZ(0.2);
+ }
+ 50% {
+ -webkit-transform: translate3d(0,0,-250px) rotateX(0deg) rotateY(180deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
+ }
+ to {
+ -webkit-transform: translate3d(0,0,50px) rotateX(-180deg) rotateY(360deg) rotateZ(180deg) scaleX(0.2) scaleY(0.2) scaleZ(0.2);
+ }
+ }
+ #cube1,#cube2,#cube3 {
+ position: absolute;
+ left: 50%;
+ top: 50%;
+ margin-top: -250px;
+ margin-left: -250px;
+ -webkit-transform-style: preserve-3d;
+ -webkit-animation: cube 5s infinite ease-in-out;
+ width: 500px;
+ height: 500px;
+ opacity: 0;
+ }
+ #cube2 {
+ left: 20%;
+ -webkit-animation: cubeH 5s infinite ease-in-out;
+ }
+ #cube3 {
+ left: 80%;
+ -webkit-animation: cubeH 5s infinite ease-in-out;
+ }
+ #cw {
+ position: absolute;
+ top: 50%;
+ width: 100%;
+ -webkit-animation: rot 19s infinite linear 45s;
+ -webkit-transform-style: preserve-3d;
+ }
+ div.face {
+ width: 500px;
+ height: 500px;
+ background: url(sub.jpg);
+ background-size: 100%;
+ position: absolute;
+ }
+ #face_1 {
+ -webkit-transform: translate3d(0,0,-250px);
+ }
+ #face_2 {
+ -webkit-transform: rotateY(90deg) translate3d(0,0,-250px);
+ }
+ #face_3 {
+ -webkit-transform: rotateY(180deg) translate3d(0,0,-250px);
+ }
+ #face_4 {
+ -webkit-transform: rotateY(270deg) translate3d(0,0,-250px);
+ }
+ #js1k {
+ position: absolute;
+ width: 100%;
+ top: 50%;
+ margin-top: -250px;
+ text-align: center;
+ font: 500px/500px Courier;
+ color: rgba(127,141,158,0.4);
+ text-shadow: 0px 5px rgba(255,255,255,0.7);
+ -webkit-animation: bounce 10s infinite linear;
+ }
+ #audio_author {
+ position: absolute;
+ bottom: 5px;
+ right: 5px;
+ color: rgba(255,255,255,0.3);
+ font: 10px/12px Helvetica;
+ }
+ </style>
+</head>
+<body>
+ <div id="js1k">JS1K</div>
+ <div id="cw">
+ <div id="cube1">
+ <div class="face" id="face_1"></div>
+ <div class="face" id="face_2"></div>
+ <div class="face" id="face_3"></div>
+ <div class="face" id="face_4"></div>
+ </div>
+ <div id="cube2">
+ <div class="face" id="face_1"></div>
+ <div class="face" id="face_2"></div>
+ <div class="face" id="face_3"></div>
+ <div class="face" id="face_4"></div>
+ </div>
+ <div id="cube3">
+ <div class="face" id="face_1"></div>
+ <div class="face" id="face_2"></div>
+ <div class="face" id="face_3"></div>
+ <div class="face" id="face_4"></div>
+ </div>
+ </div>
+ <audio src="275382_eye_of_the_tiger_8bit.mp3" autoplay="autplay"></audio>
+ <div id="audio_author">
+ Music (cc) Exactly33 http://www.newgrounds.com/audio/listen/275382
+ </div>
+ <script>
+ var c1 = document.getElementById('cube1'),
+ c2 = document.getElementById('cube2'),
+ c3 = document.getElementById('cube3');
+ setTimeout(function(){
+ c1.style.cssText += ';-webkit-transition:opacity 5s;opacity:0.8';
+ }, 10000);
+ setTimeout(function(){
+ c2.style.cssText += ';-webkit-transition:opacity 5s;opacity:0.8';
+ c3.style.cssText += ';-webkit-transition:opacity 5s;opacity:0.8';
+ }, 23000);
+ </script>
+</body>
+</html>
BIN sub.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 7fa6d67

Please sign in to comment.