Using classes to show galaxy

Author: amadeus

website/source/javascripts/app/Engine.js

@@ -81,14 +81,7 @@ Engine = Base.extend({
 	start: function(){
 		var parent = this.canvas.parentNode;
 
-		this.background.style.opacity = 1;
-
-		this.background.style.webkitTransform = 'translate3d(0,0,0) scale(1)';
-		this.background.style.mozTransform    = 'translate3d(0,0,0) scale(1)';
-		this.background.style.msTransform     = 'translate3d(0,0,0) scale(1)';
-		this.background.style.oTransform      = 'translate3d(0,0,0) scale(1)';
-		this.background.style.transform       = 'translate3d(0,0,0) scale(1)';
-
+		this.background.className += ' show';
 		this.canvas.style.opacity = 1;
 
 		new Chainable()

website/source/stylesheets/_jumbotron.less

@@ -85,6 +85,14 @@
         -ms-transform:translate3d(0,0,0) scale(0.7);
          -o-transform:translate3d(0,0,0) scale(0.7);
             transform:translate3d(0,0,0) scale(0.7);
+    &.show {
+      opacity:1;
+      -webkit-transform:translate3d(0,0,0) scale(1);
+         -moz-transform:translate3d(0,0,0) scale(1);
+          -ms-transform:translate3d(0,0,0) scale(1);
+           -o-transform:translate3d(0,0,0) scale(1);
+              transform:translate3d(0,0,0) scale(1);
+    }
   }
 }
 

website/source/stylesheets/main.css

@@ -649,6 +649,14 @@ body.page-home #footer {
   -o-transform: translate3d(0, 0, 0) scale(0.7);
   transform: translate3d(0, 0, 0) scale(0.7);
 }
+#jumbotron .galaxy-image.show {
+  opacity: 1;
+  -webkit-transform: translate3d(0, 0, 0) scale(1);
+  -moz-transform: translate3d(0, 0, 0) scale(1);
+  -ms-transform: translate3d(0, 0, 0) scale(1);
+  -o-transform: translate3d(0, 0, 0) scale(1);
+  transform: translate3d(0, 0, 0) scale(1);
+}
 .tag-line {
   position: absolute;
   width: 100%;