Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Comparing changes

Choose two branches to see what's changed or to start a new pull request. If you need to, you can also compare across forks.

Open a pull request

Create a new pull request by comparing changes across two branches. If you need to, you can also compare across forks.
base fork: madrobby/jslogocrazyness
base: master
...
head fork: marcoos/jslogocrazyness
compare: compat-fixes
Checking mergeability… Don't worry, you can still create the pull request.
  • 3 commits
  • 3 files changed
  • 0 commit comments
  • 1 contributor
View
BIN  275382_eye_of_the_tiger_8bit.ogg
Binary file not shown
View
6 README
@@ -1,8 +1,4 @@
Based on my animation for JS1K 2010.
-Works only on WebKit browsers.
-
-On Firefox 7, support for 3D CSS and MP3 is missing.
-
Licensed under the WTFPL http://en.wikipedia.org/wiki/WTFPL
-(c) 2011 Thomas Fuchs
+(c) 2011 Thomas Fuchs
View
283 index.html
@@ -8,14 +8,23 @@
}
body {
-webkit-transform: perspective(800);
- -webkit-transform-style: preserve-3d;
- -moz-transform: perspective(800);
- -moz-transform-style: preserve-3d;
+ -moz-transform: perspective(800px);
+ -o-transform: perspective(800px);
+ -ms-transform: perspective(800px);
+ transform: perspective(800px);
+ -webkit-transform-style: preserve-3d;
+ -moz-transform-style: preserve-3d;
+ -o-transform-style: preserve-3d;
+ -ms-transform-style: preserve-3d;
+ transform-style: preserve-3d;
height: 100%;
overflow: hidden;
margin: 0;
- background:
- #fbf59d no-repeat top center -webkit-gradient(radial, center top, 0, center top, 600, from(#fbf59d), to(#fbf7b3));
+ background: #fbf59d no-repeat top center;
+ background-image: -webkit-gradient(radial, center top, 0, center top, 600, from(#fbf59d), to(#fbf7b3));
+ background-image: -moz-gradient(radial, center top, 0, center top, 600, from(#fbf59d), to(#fbf7b3));
+ background-image: -o-gradient(radial, center top, 0, center top, 600, from(#fbf59d), to(#fbf7b3));
+ background-image: gradient(radial, center top, 0, center top, 600, from(#fbf59d), to(#fbf7b3));
}
@-webkit-keyframes bounce {
from {
@@ -63,6 +72,190 @@
-webkit-transform: translate3d(0,0,50px) rotateX(-180deg) rotateY(360deg) rotateZ(180deg) scaleX(0.2) scaleY(0.2) scaleZ(0.2);
}
}
+ @-moz-keyframes bounce {
+ from {
+ -moz-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
+ }
+ to {
+ -moz-transform: rotateX(0deg) rotateY(-360deg) rotateZ(0deg);
+ }
+ }
+ @-moz-keyframes rot {
+ from {
+ -moz-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
+ }
+ to {
+ -moz-transform: rotateX(0deg) rotateY(-360deg) rotateZ(0deg);
+ }
+ }
+ @-moz-keyframes scroll {
+ from {
+ -moz-transform: translate3d(-300px,900px,-300px);
+ }
+ to {
+ -moz-transform: translate3d(-300px,-1000px,-300px);
+ }
+ }
+ @-moz-keyframes cube {
+ from {
+ -moz-transform: rotateX(180deg) rotateY(0deg) rotateZ(-180deg) scaleX(0.2) scaleY(0.2) scaleZ(0.2);
+ }
+ 50% {
+ -moz-transform: rotateX(0deg) rotateY(180deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
+ }
+ to {
+ -moz-transform: rotateX(-180deg) rotateY(360deg) rotateZ(180deg) scaleX(0.2) scaleY(0.2) scaleZ(0.2);
+ }
+ }
+ @-moz-keyframes cubeH {
+ from {
+ -moz-transform: translate3d(0,0,50px) rotateX(180deg) rotateY(0deg) rotateZ(-180deg) scaleX(0.2) scaleY(0.2) scaleZ(0.2);
+ }
+ 50% {
+ -moz-transform: translate3d(0,0,-250px) rotateX(0deg) rotateY(180deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
+ }
+ to {
+ -moz-transform: translate3d(0,0,50px) rotateX(-180deg) rotateY(360deg) rotateZ(180deg) scaleX(0.2) scaleY(0.2) scaleZ(0.2);
+ }
+ }
+ @-o-keyframes bounce {
+ from {
+ -o-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
+ }
+ to {
+ -o-transform: rotateX(0deg) rotateY(-360deg) rotateZ(0deg);
+ }
+ }
+ @-o-keyframes rot {
+ from {
+ -o-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
+ }
+ to {
+ -o-transform: rotateX(0deg) rotateY(-360deg) rotateZ(0deg);
+ }
+ }
+ @-o-keyframes scroll {
+ from {
+ -o-transform: translate3d(-300px,900px,-300px);
+ }
+ to {
+ -o-transform: translate3d(-300px,-1000px,-300px);
+ }
+ }
+ @-o-keyframes cube {
+ from {
+ -o-transform: rotateX(180deg) rotateY(0deg) rotateZ(-180deg) scaleX(0.2) scaleY(0.2) scaleZ(0.2);
+ }
+ 50% {
+ -o-transform: rotateX(0deg) rotateY(180deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
+ }
+ to {
+ -o-transform: rotateX(-180deg) rotateY(360deg) rotateZ(180deg) scaleX(0.2) scaleY(0.2) scaleZ(0.2);
+ }
+ }
+ @-o-keyframes cubeH {
+ from {
+ -o-transform: translate3d(0,0,50px) rotateX(180deg) rotateY(0deg) rotateZ(-180deg) scaleX(0.2) scaleY(0.2) scaleZ(0.2);
+ }
+ 50% {
+ -o-transform: translate3d(0,0,-250px) rotateX(0deg) rotateY(180deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
+ }
+ to {
+ -o-transform: translate3d(0,0,50px) rotateX(-180deg) rotateY(360deg) rotateZ(180deg) scaleX(0.2) scaleY(0.2) scaleZ(0.2);
+ }
+ }
+ @-ms-keyframes bounce {
+ from {
+ -ms-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
+ }
+ to {
+ -ms-transform: rotateX(0deg) rotateY(-360deg) rotateZ(0deg);
+ }
+ }
+ @-ms-keyframes rot {
+ from {
+ -ms-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
+ }
+ to {
+ -ms-transform: rotateX(0deg) rotateY(-360deg) rotateZ(0deg);
+ }
+ }
+ @-ms-keyframes scroll {
+ from {
+ -ms-transform: translate3d(-300px,900px,-300px);
+ }
+ to {
+ -ms-transform: translate3d(-300px,-1000px,-300px);
+ }
+ }
+ @-ms-keyframes cube {
+ from {
+ -ms-transform: rotateX(180deg) rotateY(0deg) rotateZ(-180deg) scaleX(0.2) scaleY(0.2) scaleZ(0.2);
+ }
+ 50% {
+ -ms-transform: rotateX(0deg) rotateY(180deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
+ }
+ to {
+ -ms-transform: rotateX(-180deg) rotateY(360deg) rotateZ(180deg) scaleX(0.2) scaleY(0.2) scaleZ(0.2);
+ }
+ }
+ @-ms-keyframes cubeH {
+ from {
+ -ms-transform: translate3d(0,0,50px) rotateX(180deg) rotateY(0deg) rotateZ(-180deg) scaleX(0.2) scaleY(0.2) scaleZ(0.2);
+ }
+ 50% {
+ -ms-transform: translate3d(0,0,-250px) rotateX(0deg) rotateY(180deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
+ }
+ to {
+ -ms-transform: translate3d(0,0,50px) rotateX(-180deg) rotateY(360deg) rotateZ(180deg) scaleX(0.2) scaleY(0.2) scaleZ(0.2);
+ }
+ }
+ @keyframes bounce {
+ from {
+ transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
+ }
+ to {
+ transform: rotateX(0deg) rotateY(-360deg) rotateZ(0deg);
+ }
+ }
+ @keyframes rot {
+ from {
+ transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
+ }
+ to {
+ transform: rotateX(0deg) rotateY(-360deg) rotateZ(0deg);
+ }
+ }
+ @keyframes scroll {
+ from {
+ transform: translate3d(-300px,900px,-300px);
+ }
+ to {
+ transform: translate3d(-300px,-1000px,-300px);
+ }
+ }
+ @keyframes cube {
+ from {
+ transform: rotateX(180deg) rotateY(0deg) rotateZ(-180deg) scaleX(0.2) scaleY(0.2) scaleZ(0.2);
+ }
+ 50% {
+ transform: rotateX(0deg) rotateY(180deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
+ }
+ to {
+ transform: rotateX(-180deg) rotateY(360deg) rotateZ(180deg) scaleX(0.2) scaleY(0.2) scaleZ(0.2);
+ }
+ }
+ @keyframes cubeH {
+ from {
+ transform: translate3d(0,0,50px) rotateX(180deg) rotateY(0deg) rotateZ(-180deg) scaleX(0.2) scaleY(0.2) scaleZ(0.2);
+ }
+ 50% {
+ transform: translate3d(0,0,-250px) rotateX(0deg) rotateY(180deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
+ }
+ to {
+ 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%;
@@ -73,6 +266,12 @@
-webkit-animation: cube 5s infinite ease-in-out;
-moz-transform-style: preserve-3d;
-moz-animation: cube 5s infinite ease-in-out;
+ -ms-transform-style: preserve-3d;
+ -ms-animation: cube 5s infinite ease-in-out;
+ -o-transform-style: preserve-3d;
+ -o-animation: cube 5s infinite ease-in-out;
+ transform-style: preserve-3d;
+ animation: cube 5s infinite ease-in-out;
width: 500px;
height: 500px;
opacity: 0;
@@ -80,10 +279,18 @@
#cube2 {
left: 20%;
-webkit-animation: cubeH 5s infinite ease-in-out;
+ -moz-animation: cubeH 5s infinite ease-in-out;
+ -ms-animation: cubeH 5s infinite ease-in-out;
+ -o-animation: cubeH 5s infinite ease-in-out;
+ animation: cubeH 5s infinite ease-in-out;
}
#cube3 {
left: 80%;
-webkit-animation: cubeH 5s infinite ease-in-out;
+ -moz-animation: cubeH 5s infinite ease-in-out;
+ -ms-animation: cubeH 5s infinite ease-in-out;
+ -o-animation: cubeH 5s infinite ease-in-out;
+ animation: cubeH 5s infinite ease-in-out;
}
#cw {
position: absolute;
@@ -91,6 +298,14 @@
width: 100%;
-webkit-animation: rot 19s infinite linear 45s;
-webkit-transform-style: preserve-3d;
+ -moz-animation: rot 19s infinite linear 45s;
+ -moz-transform-style: preserve-3d;
+ -ms-animation: rot 19s infinite linear 45s;
+ -ms-transform-style: preserve-3d;
+ -o-animation: rot 19s infinite linear 45s;
+ -o-transform-style: preserve-3d;
+ animation: rot 19s infinite linear 45s;
+ transform-style: preserve-3d;
}
div.face {
width: 500px;
@@ -101,15 +316,32 @@
}
#face_1 {
-webkit-transform: rotateY(180deg) translate3d(0,0,250px);
+ -moz-transform: rotateY(180deg) translate3d(0,0,250px);
+ -ms-transform: rotateY(180deg) translate3d(0,0,250px);
+ -o-transform: rotateY(180deg) translate3d(0,0,250px);
+ transform: rotateY(180deg) translate3d(0,0,250px);
}
#face_2 {
-webkit-transform: rotateY(270deg) translate3d(0,0,250px);
+ -moz-transform: rotateY(270deg) translate3d(0,0,250px);
+ -ms-transform: rotateY(270deg) translate3d(0,0,250px);
+ -o-transform: rotateY(270deg) translate3d(0,0,250px);
+ transform: rotateY(270deg) translate3d(0,0,250px);
+
}
#face_3 {
-webkit-transform: rotateY(0deg) translate3d(0,0,250px);
+ -moz-transform: rotateY(0deg) translate3d(0,0,250px);
+ -ms-transform: rotateY(0deg) translate3d(0,0,250px);
+ -o-transform: rotateY(0deg) translate3d(0,0,250px);
+ transform: rotateY(0deg) translate3d(0,0,250px);
}
#face_4 {
-webkit-transform: rotateY(90deg) translate3d(0,0,250px);
+ -moz-transform: rotateY(90deg) translate3d(0,0,250px);
+ -ms-transform: rotateY(90deg) translate3d(0,0,250px);
+ -o-transform: rotateY(90deg) translate3d(0,0,250px);
+ transform: rotateY(90deg) translate3d(0,0,250px);
}
#js1k {
position: absolute;
@@ -122,6 +354,10 @@
color: rgba(127,141,158,0.4);
text-shadow: 0px 5px rgba(255,255,255,0.7);
-webkit-animation: bounce 10s infinite linear;
+ -moz-animation: bounce 10s infinite linear;
+ -ms-animation: bounce 10s infinite linear;
+ -o-animation: bounce 10s infinite linear;
+ animation: bounce 10s infinite linear;
opacity: 0;
}
#audio_author {
@@ -138,6 +374,10 @@
width: 1000px;
color: rgba(255,255,255,0.4);
-webkit-animation: scroll 100s infinite linear;
+ -moz-animation: scroll 100s infinite linear;
+ -ms-animation: scroll 100s infinite linear;
+ -o-animation: scroll 100s infinite linear;
+ animation: scroll 100s infinite linear;
}
</style>
</head>
@@ -163,7 +403,10 @@
<div class="face" id="face_4"></div>
</div>
</div>
- <audio src="275382_eye_of_the_tiger_8bit.mp3" autoplay="autoplay"></audio>
+ <audio autoplay="autoplay">
+ <source src="275382_eye_of_the_tiger_8bit.mp3" type="audio/mpeg3"></source>
+ <source src="275382_eye_of_the_tiger_8bit.ogg" type="application/ogg"></source>
+ </audio>
<div id="audio_author">
Music (cc) Exactly33 http://www.newgrounds.com/audio/listen/275382
</div>
@@ -171,17 +414,33 @@
<script>
var c1 = document.getElementById('cube1'),
c2 = document.getElementById('cube2'),
- c3 = document.getElementById('cube3');
+ c3 = document.getElementById('cube3'),
+ vendorPrefix = "";
+
+ if (window.opera) {
+ vendorPrefix = "-o-";
+ } else if (navigator.product == "Gecko") {
+ if (navigator.userAgent.indexOf("WebKit") >= 0) {
+ vendorPrefix = "-webkit-";
+ } else {
+ vendorPrefix = "-moz-";
+ }
+ } else {
+ vendorPrefix = "-ms-";
+ }
+
+ vendorPrefix
+
setTimeout(function(){
- document.getElementById('js1k').style.cssText += ';-webkit-transition:opacity 5s;opacity:0.8';
+ document.getElementById('js1k').style.cssText += ';' + vendorPrefix + 'transition:opacity 5s;transition:opacity 5s;opacity:0.8';
}, 1000);
setTimeout(function(){
- c1.style.cssText += ';-webkit-transition:opacity 5s;opacity:0.8';
+ c1.style.cssText += ';' + vendorPrefix + 'transition:opacity 5s;transition:opacity 5s;opacity:0.8';
}, 1);
setTimeout(function(){
- c2.style.cssText += ';-webkit-transition:opacity 5s;opacity:0.8';
- c3.style.cssText += ';-webkit-transition:opacity 5s;opacity:0.8';
+ c2.style.cssText += ';' + vendorPrefix + 'transition:opacity 5s;transition:opacity 5s;opacity:0.8';
+ c3.style.cssText += ';' + vendorPrefix + 'transition:opacity 5s;transition:opacity 5s;opacity:0.8';
}, 23000);
</script>
</body>
-</html>
+</html>

No commit comments for this range

Something went wrong with that request. Please try again.