From fc7ba0f29f549820885fcb11e88c68256d3eacca Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 14 Apr 2015 14:54:22 -0400 Subject: adding loader --- site/public/assets/javascripts/_env.js | 20 +++--- site/public/assets/style.css | 22 ++++++- site/templates/index.liquid | 110 +++++++++++++++++++++++++++++++++ themes/okadmin/public/js/app.js | 2 +- 4 files changed, 143 insertions(+), 11 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 = "" + loading_text.innerHTML.split("").join("") + "" } 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; diff --git a/site/templates/index.liquid b/site/templates/index.liquid index 1b4978c..e870a6d 100644 --- a/site/templates/index.liquid +++ b/site/templates/index.liquid @@ -118,6 +118,116 @@ WEBSITE BY OKFOCUS, http://okfoc.us, Internet Legends.
CONTACT
+ +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
diff --git a/themes/okadmin/public/js/app.js b/themes/okadmin/public/js/app.js index a5bd0fc..22317f3 100644 --- a/themes/okadmin/public/js/app.js +++ b/themes/okadmin/public/js/app.js @@ -60,8 +60,8 @@ var OKAdmin = function(){ var id = $section.data("id"), type = $section.data("type") if ($title.length && ! $title.val()) { - alert("Please enter a title") $title.focus() + alert("Please enter a title") e.preventDefault() return } -- cgit v1.2.3-70-g09d2