adding loader

2 files changed, 32 insertions, 10 deletions

diff --git a/site/public/assets/javascripts/_env.js b/site/public/assets/javascripts/_env.js
index 8871602..5fddaa7 100644
--- a/site/public/assets/javascripts/_env.js
+++ b/site/public/assets/javascripts/_env.js
@@ -13,6 +13,7 @@ var done_loading = false, menu_open = false, entry_open = false
 
 var environment = {}, hashes = {}
 environment.init = function(){
+  $("#scene").addClass("fade")
 	var loader = new Loader(environment.ready, new HustleLoader)
 	var preloadImages = $("#preload-image-list").html().split("\n").filter(function(s){ return !!s })
 	loader.preloadImages(box_images.map(function(url){
@@ -24,7 +25,7 @@ environment.ready = function(){
   if (window.innerWidth < 500) document.body.classList.add('mobile')
 
 	controls = new MX.OrbitCamera({
-	  radius: 1000,
+	  radius: 100000,
 	  radiusRange: [ 10, 2000 ],
 	  rotationX: PI/2,
 	  rotationY: PI,
@@ -159,6 +160,7 @@ environment.ready = function(){
   }
   else {
     build_scene()
+    $("#scene").removeClass("fade")
   }
   
   setTimeout(function(){ done_loading = true }, 200)
@@ -188,6 +190,9 @@ environment.ready = function(){
 
 
 function build_scene () {
+  controls.setZoom(100000)
+  controls.zoom(1000)
+
   strips.push( new Strip({
     images: box_images.slice(0, 5),
     x: -100,
@@ -493,24 +498,23 @@ Strip.prototype.update = function(t){
 }
 
 function HustleLoader () {
+  var svg = document.getElementById("loader_svg_status")
   function init(){
     build()
   }
   function build(){
     setTimeout(function(){ $("#loader_svg").addClass("slide") }, 100)
-
-//     loading_text.innerHTML = "<span>" + loading_text.innerHTML.split("").join("</span><span>") + "</span>"
   }
   this.update = function (i) {
-//     loading_status.style.width = ((100*(1-i))|0) + "%"
-//     loader_svg_status.setAttribute("y", (i) * 245)
+    var y = lerp(1-i, 1100, 245)
+    svg.setAttribute("y", y )
   }
   this.finish = function(cb){
 		$("#loader_rapper").addClass("hidden")
-		setTimeout(cb, 100)
+ 		setTimeout(cb, 100)
     setTimeout(function(){
-    	$("#loader_rapper").hide()
-    }, 300)
+     	$("#loader_rapper").hide()
+    }, 500)
   }
   init()
 }
diff --git a/site/public/assets/style.css b/site/public/assets/style.css
index 2ca71b4..e5a3404 100644
--- a/site/public/assets/style.css
+++ b/site/public/assets/style.css
@@ -208,6 +208,24 @@ cursor: grabbing;
 	cursor: -moz-grabbing;
 }
 
+#loader_rapper {
+  -webkit-transition: 0.3s opacity !important;
+  transition: 0.3s opacity !important;
+  opacity: 1.0;
+}
+#loader_rapper.hidden {
+  opacity: 0;
+}
+#loader_svg {
+  position: absolute;
+  left: 2.5%;
+  top: 10%;
+  height: 60%;
+  width: 95%;
+}
+#loader_svg svg {
+  width: 100%; height: 100%;
+}
 nav {
 	-moz-user-select: none;
 	-webkit-user-select: none;
@@ -268,7 +286,7 @@ nav .middle {
 
 nav .bottom {
 	width: 100%;
-	background: #44D3D3;
+	background: #bbb;
 }
 nav a {
 	text-decoration:none;
@@ -638,7 +656,7 @@ nav a.active, nav .sub a:hover {
 }
 .logo {
 	position: fixed;
-	right: 10px;
+  right: 2%;
 	bottom: 10px;
 	width: 6%;
 	max-width:120px;