diff --git a/static/css/home.leftovers.css b/static/css/home.leftovers.css new file mode 100644 index 0000000..1d39111 --- /dev/null +++ b/static/css/home.leftovers.css @@ -0,0 +1,12 @@ +@-moz-keyframes spin { + from { -moz-transform: rotate(0deg); } + to { -moz-transform: rotate(360deg); } +} +@-webkit-keyframes spin { + from { -webkit-transform: rotate(0deg); } + to { -webkit-transform: rotate(360deg); } +} +@keyframes spin { + from {transform:rotate(0deg);} + to {transform:rotate(360deg);} +} diff --git a/static/js/home.leftovers.js b/static/js/home.leftovers.js index d95e533..4bf5b22 100644 --- a/static/js/home.leftovers.js +++ b/static/js/home.leftovers.js @@ -27,7 +27,8 @@ pandora.ui.home = function() { bottom: '256px', width: window.innerWidth + 'px', margin: 'auto', - cursor: 'pointer' + cursor: 'pointer', + animation: 'spin 7500ms linear infinite' }) .on({ click: function() { @@ -215,7 +216,8 @@ pandora.ui.home = function() { opacity: 0, textAlign: 'center' }) - .appendTo(that); + .appendTo(that), + loadedCSS = false; if (pandora.user.level == 'guest') { $signupButton.appendTo(that); @@ -224,13 +226,26 @@ pandora.ui.home = function() { $preferencesButton.appendTo(that); } + function loadCSS(callback) { + if (loadedCSS) { + callback() + } else { + Ox.getFile('/static/css/home.leftovers.css', function() { + loadedCSS = true + callback() + }) + } + } + that.fadeInScreen = function() { - that.appendTo(Ox.$body).animate({opacity: 1}, 500, function() { - that.find(':not(#logo)').animate({opacity: 1}, 250, function() { - $findInput.focusInput(true); + loadCSS(function() { + that.appendTo(Ox.$body).animate({opacity: 1}, 500, function() { + that.find(':not(#logo)').animate({opacity: 1}, 250, function() { + $findInput.focusInput(true); + }); }); + $logo.animate({width: '320px'}, 500); }); - $logo.animate({width: '320px'}, 500); return that; };