From 3f54a5fa1863278c8d22509291b39304a7a3ec11 Mon Sep 17 00:00:00 2001 From: Amadeus Demarzi Date: Sat, 26 Jul 2014 01:00:59 -0700 Subject: [PATCH] More tweaks and stuff Improved CSS and HTML a bit in the jumbotron. --- website/source/index.html.erb | 11 +- website/source/javascripts/app/Engine.js | 56 ++++--- website/source/javascripts/app/Init.js | 24 ++- website/source/stylesheets/_jumbotron.less | 184 +++++++++++++++------ website/source/stylesheets/main.css | 149 +++++++++++------ 5 files changed, 287 insertions(+), 137 deletions(-) diff --git a/website/source/index.html.erb b/website/source/index.html.erb index a9e7903e9..72fc5b0bd 100644 --- a/website/source/index.html.erb +++ b/website/source/index.html.erb @@ -1,14 +1,9 @@
-
-
- +
+
+

Build, Combine and Launch Infrastucture

diff --git a/website/source/javascripts/app/Engine.js b/website/source/javascripts/app/Engine.js index 71940dd7c..db5b08e20 100644 --- a/website/source/javascripts/app/Engine.js +++ b/website/source/javascripts/app/Engine.js @@ -44,19 +44,28 @@ Engine = Base.extend({ y: -9999 }, - constructor: function(canvas, image){ - if (typeof canvas === 'string') { - this.canvas = document.getElementById(canvas); - } else { - this.canvas = canvas; - } + constructor: function(canvas, background, tagLine){ + this.canvas = canvas; + this.background = background; + this.tagLine = tagLine; if (!this.canvas.getContext) { - return; + return null; } this.context = this.canvas.getContext('2d'); + this.setupEvents(); + this.setupStarfield(); + this.setupTessellation(); + + this.last = Date.now() / 1000; + this.render = this.render.bind(this); + + this.start(); + }, + + setupEvents: function(){ this.resize = this.resize.bind(this); this.resize(); window.addEventListener('resize', this.resize, false); @@ -65,31 +74,22 @@ Engine = Base.extend({ this._handleScroll(); window.addEventListener('scroll', this._handleScroll, false); - this.setupStarfield(); - this.setupTessellation(); - - this.last = Date.now() / 1000; - - this.start = this.last; - this._handleMouseCoords = this._handleMouseCoords.bind(this); window.addEventListener('mousemove', this._handleMouseCoords, false); - - this.render = this.render.bind(this); - this.render(); - - this.canvas.style.opacity = 1; - - this.cssAnimations( - document.getElementById(image) - ); }, - cssAnimations: function(image){ + start: function(){ var parent = this.canvas.parentNode; - image.style.webkitTransform = 'translate3d(0,0,0) scale(1)'; - image.style.opacity = 1; + 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.canvas.style.opacity = 1; new Chainable() .wait(1000) @@ -123,6 +123,8 @@ Engine = Base.extend({ .wait(1000) .then(function(){ }, this); + + this.render(); }, setupStarfield: function(){ @@ -135,7 +137,7 @@ Engine = Base.extend({ this.shapes = []; this.logo = new Engine.Shape( -(180), - -(180), + -(220), 360, 360, Logo.Points, diff --git a/website/source/javascripts/app/Init.js b/website/source/javascripts/app/Init.js index 89b455fb0..18ec957c1 100644 --- a/website/source/javascripts/app/Init.js +++ b/website/source/javascripts/app/Init.js @@ -12,20 +12,42 @@ var Init = { } }, + generateAnimatedLogo: function(){ + var container, x, block; + + container = document.createElement('div'); + container.className = 'animated-logo'; + + for (x = 1; x < 5; x++) { + block = document.createElement('div'); + block.className = 'white-block block-' + x; + container.appendChild(block); + } + + return container; + }, + Pages: { 'page-home': function(){ var jumbotron = document.getElementById('jumbotron'), + content = document.getElementById('jumbotron-content'), + galaxy = document.getElementById('galaxy-bg'), + tagLine = document.getElementById('tag-line'), canvas; if (!jumbotron) { return; } + content.appendChild( + Init.generateAnimatedLogo() + ); + canvas = document.createElement('canvas'); canvas.className = 'terraform-canvas'; jumbotron.appendChild(canvas); - window.engine = new Engine(canvas, 'image'); + window.engine = new Engine(canvas, galaxy, tagLine); } } diff --git a/website/source/stylesheets/_jumbotron.less b/website/source/stylesheets/_jumbotron.less index 113b30adb..410add7d8 100755 --- a/website/source/stylesheets/_jumbotron.less +++ b/website/source/stylesheets/_jumbotron.less @@ -22,7 +22,6 @@ left:0; width:100%; height:100%; - /* background-color:#000; */ opacity:0; -webkit-transition:opacity 2s ease-out; @@ -38,7 +37,7 @@ transform:translate3d(0,0,0); } - .logo-container { + .jumbotron-content { position:absolute; z-index:999; top:0; @@ -47,9 +46,13 @@ bottom:0; -webkit-transform:translate3d(0,0,0); + -moz-transform:translate3d(0,0,0); + -ms-transform:translate3d(0,0,0); + -o-transform:translate3d(0,0,0); + transform:translate3d(0,0,0); } - #image { + .galaxy-image { position:absolute; width:100%; height:100%; @@ -85,6 +88,22 @@ } } +.tag-line { + position:absolute; + width:100%; + top:540px; + color:#fff; + text-align:center; + + font-family:"Courier New", Monaco, Menlo, Consolas, monospace; + + -webkit-transform:translate3d(0,0,0); + -moz-transform:translate3d(0,0,0); + -ms-transform:translate3d(0,0,0); + -o-transform:translate3d(0,0,0); + transform:translate3d(0,0,0); +} + .animated-logo { position:absolute; z-index:200; @@ -92,23 +111,54 @@ left:50%; width:140px; height:140px; - margin:-28px 0 0 -115px; + margin:-60px 0 0 -115px; opacity:1; -webkit-transition:-webkit-transform 300ms ease-in-out; + -moz-transition: -moz-transform 300ms ease-in-out; + -ms-transition: -ms-transform 300ms ease-in-out; + -o-transition: -o-transform 300ms ease-in-out; + transition: transform 300ms ease-in-out; -webkit-transform-origin:50% 50%; + -moz-transform-origin:50% 50%; + -ms-transform-origin:50% 50%; + -o-transform-origin:50% 50%; + transform-origin:50% 50%; + -webkit-transform-style:preserve-3d; + -moz-transform-style:preserve-3d; + -ms-transform-style:preserve-3d; + -o-transform-style:preserve-3d; + transform-style:preserve-3d; + -webkit-transform:translate3d(0,0,0) rotateY(0deg) skewY(0deg) scale(1,1); + -moz-transform:translate3d(0,0,0) rotateY(0deg) skewY(0deg) scale(1,1); + -ms-transform:translate3d(0,0,0) rotateY(0deg) skewY(0deg) scale(1,1); + -o-transform:translate3d(0,0,0) rotateY(0deg) skewY(0deg) scale(1,1); + transform:translate3d(0,0,0) rotateY(0deg) skewY(0deg) scale(1,1); } .state-one .animated-logo { -webkit-transform:translate3d(0,0,0) rotateY(0deg) skewY(0deg) scale(1,1); + -moz-transform:translate3d(0,0,0) rotateY(0deg) skewY(0deg) scale(1,1); + -ms-transform:translate3d(0,0,0) rotateY(0deg) skewY(0deg) scale(1,1); + -o-transform:translate3d(0,0,0) rotateY(0deg) skewY(0deg) scale(1,1); + transform:translate3d(0,0,0) rotateY(0deg) skewY(0deg) scale(1,1); } .state-one.state-two.state-three.state-four .animated-logo { -webkit-transform-origin:100% 0; + -moz-transform-origin:100% 0; + -ms-transform-origin:100% 0; + -o-transform-origin:100% 0; + transform-origin:100% 0; + -webkit-transform:translate3d(0,10px,0) rotateY(-45deg) skewY(22deg) scale(1.26,1); + -moz-transform:translate3d(0,10px,0) rotateY(-45deg) skewY(22deg) scale(1.26,1); + -ms-transform:translate3d(0,10px,0) rotateY(-45deg) skewY(22deg) scale(1.26,1); + -o-transform:translate3d(0,10px,0) rotateY(-45deg) skewY(22deg) scale(1.26,1); + transform:translate3d(0,10px,0) rotateY(-45deg) skewY(22deg) scale(1.26,1); } .state-one.state-two.state-three.state-four .white-block { @@ -134,93 +184,117 @@ opacity 300ms ease-out, -webkit-transform 300ms ease-out, background-color 300ms ease-out; + -moz-transition: + opacity 300ms ease-out, + -moz-transform 300ms ease-out, + background-color 300ms ease-out; + -ms-transition: + opacity 300ms ease-out, + -ms-transform 300ms ease-out, + background-color 300ms ease-out; + -o-transition: + opacity 300ms ease-out, + -o-transform 300ms ease-out, + background-color 300ms ease-out; + transition: + opacity 300ms ease-out, + transform 300ms ease-out, + background-color 300ms ease-out; } -.block-one, -.block-two, -.block-three, -.block-four { +.block-1, +.block-2, +.block-3, +.block-4 { top:0; left:72px; -webkit-transform-origin:50% 50%; + -moz-transform-origin:50% 50%; + -ms-transform-origin:50% 50%; + -o-transform-origin:50% 50%; + transform-origin:50% 50%; + -webkit-transform:translate3d(0,0,0); + -moz-transform:translate3d(0,0,0); + -ms-transform:translate3d(0,0,0); + -o-transform:translate3d(0,0,0); + transform:translate3d(0,0,0); } -.block-one { +.block-1 { opacity:0; + -webkit-transform:translate3d(0,0,0) scale(0,0); + -moz-transform:translate3d(0,0,0) scale(0,0); + -ms-transform:translate3d(0,0,0) scale(0,0); + -o-transform:translate3d(0,0,0) scale(0,0); + transform:translate3d(0,0,0) scale(0,0); } -.block-two { +.block-2 { opacity:0; top:0; left:0; + -webkit-transform:translate3d(0,0,0) scale(0,0); + -moz-transform:translate3d(0,0,0) scale(0,0); + -ms-transform:translate3d(0,0,0) scale(0,0); + -o-transform:translate3d(0,0,0) scale(0,0); + transform:translate3d(0,0,0) scale(0,0); } -.block-three { +.block-3 { opacity:0; top:72px; - /* -webkit-transform:translate3d(0,-100px,0) scaleY(1); */ + -webkit-transform:translate3d(0,0,0) scale(0,0); + -moz-transform:translate3d(0,0,0) scale(0,0); + -ms-transform:translate3d(0,0,0) scale(0,0); + -o-transform:translate3d(0,0,0) scale(0,0); + transform:translate3d(0,0,0) scale(0,0); } -.block-four { +.block-4 { -webkit-transform-origin:0 0; + -moz-transform-origin:0 0; + -ms-transform-origin:0 0; + -o-transform-origin:0 0; + transform-origin:0 0; + -webkit-transform:translate3d(72px,-2px,0) rotateY(90deg) skewY(-22deg) scaleX(1.25); + -moz-transform:translate3d(72px,-2px,0) rotateY(90deg) skewY(-22deg) scaleX(1.25); + -ms-transform:translate3d(72px,-2px,0) rotateY(90deg) skewY(-22deg) scaleX(1.25); + -o-transform:translate3d(72px,-2px,0) rotateY(90deg) skewY(-22deg) scaleX(1.25); + transform:translate3d(72px,-2px,0) rotateY(90deg) skewY(-22deg) scaleX(1.25); } -.state-one.state-two .block-one { +.state-one.state-two .block-1 { opacity:1; + -webkit-transform:translate3d(0,0,0) scale(1,1); - /* -webkit-animation:PopIn 300ms 1 ease-in; */ - /* animation:PopIn 300ms 1 ease-in; */ + -moz-transform:translate3d(0,0,0) scale(1,1); + -ms-transform:translate3d(0,0,0) scale(1,1); + -o-transform:translate3d(0,0,0) scale(1,1); + transform:translate3d(0,0,0) scale(1,1); } -.state-one .block-two { +.state-one .block-2 { opacity:1; + -webkit-transform:translate3d(0,0,0) scale(1,1); - /* -webkit-animation:PopIn 300ms 1 ease-in; */ - /* animation:PopIn 300ms 1 ease-in; */ + -moz-transform:translate3d(0,0,0) scale(1,1); + -ms-transform:translate3d(0,0,0) scale(1,1); + -o-transform:translate3d(0,0,0) scale(1,1); + transform:translate3d(0,0,0) scale(1,1); } -.state-one.state-two.state-three .block-three { +.state-one.state-two.state-three .block-3 { opacity:1; + -webkit-transform:translate3d(0,0,0) scale(1,1); - /* -webkit-animation:PopIn 300ms 1 ease-in; */ - /* animation:PopIn 300ms 1 ease-in; */ -} - -@-webkit-keyframes PopIn { - 0% { - opacity:0; - - -webkit-transform:translate3d(0,0,0) scale(0); - - -webkit-animation-timing-function:ease-out; - animation-timing-function:ease-out; - } - 40% { - opacity: 1; - - -webkit-transform:translate3d(0,0,0) scale(1.2); - - -webkit-animation-timing-function:ease-out; - animation-timing-function:ease-out; - } - 70% { - opacity: 1; - - -webkit-transform:translate3d(0,0,0) scale(0.90); - - -webkit-animation-timing-function:ease-out; - animation-timing-function:ease-out; - } - 100% { - opacity: 1; - - - -webkit-transform:translate3d(0,0,0) scale(1); - } + -moz-transform:translate3d(0,0,0) scale(1,1); + -ms-transform:translate3d(0,0,0) scale(1,1); + -o-transform:translate3d(0,0,0) scale(1,1); + transform:translate3d(0,0,0) scale(1,1); } diff --git a/website/source/stylesheets/main.css b/website/source/stylesheets/main.css index 9319f3844..fa5137a31 100644 --- a/website/source/stylesheets/main.css +++ b/website/source/stylesheets/main.css @@ -603,7 +603,6 @@ body.page-home #footer { left: 0; width: 100%; height: 100%; - /* background-color:#000; */ opacity: 0; -webkit-transition: opacity 2s ease-out; -moz-transition: opacity 2s ease-out; @@ -616,7 +615,7 @@ body.page-home #footer { -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } -#jumbotron .logo-container { +#jumbotron .jumbotron-content { position: absolute; z-index: 999; top: 0; @@ -624,8 +623,12 @@ body.page-home #footer { right: 0; bottom: 0; -webkit-transform: translate3d(0, 0, 0); + -moz-transform: translate3d(0, 0, 0); + -ms-transform: translate3d(0, 0, 0); + -o-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); } -#jumbotron #image { +#jumbotron .galaxy-image { position: absolute; width: 100%; height: 100%; @@ -646,6 +649,19 @@ body.page-home #footer { -o-transform: translate3d(0, 0, 0) scale(0.7); transform: translate3d(0, 0, 0) scale(0.7); } +.tag-line { + position: absolute; + width: 100%; + top: 540px; + color: #fff; + text-align: center; + font-family: "Courier New", Monaco, Menlo, Consolas, monospace; + -webkit-transform: translate3d(0, 0, 0); + -moz-transform: translate3d(0, 0, 0); + -ms-transform: translate3d(0, 0, 0); + -o-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); +} .animated-logo { position: absolute; z-index: 200; @@ -653,19 +669,47 @@ body.page-home #footer { left: 50%; width: 140px; height: 140px; - margin: -28px 0 0 -115px; + margin: -60px 0 0 -115px; opacity: 1; -webkit-transition: -webkit-transform 300ms ease-in-out; + -moz-transition: -moz-transform 300ms ease-in-out; + -ms-transition: -ms-transform 300ms ease-in-out; + -o-transition: -o-transform 300ms ease-in-out; + transition: transform 300ms ease-in-out; -webkit-transform-origin: 50% 50%; + -moz-transform-origin: 50% 50%; + -ms-transform-origin: 50% 50%; + -o-transform-origin: 50% 50%; + transform-origin: 50% 50%; -webkit-transform-style: preserve-3d; + -moz-transform-style: preserve-3d; + -ms-transform-style: preserve-3d; + -o-transform-style: preserve-3d; + transform-style: preserve-3d; -webkit-transform: translate3d(0, 0, 0) rotateY(0deg) skewY(0deg) scale(1, 1); + -moz-transform: translate3d(0, 0, 0) rotateY(0deg) skewY(0deg) scale(1, 1); + -ms-transform: translate3d(0, 0, 0) rotateY(0deg) skewY(0deg) scale(1, 1); + -o-transform: translate3d(0, 0, 0) rotateY(0deg) skewY(0deg) scale(1, 1); + transform: translate3d(0, 0, 0) rotateY(0deg) skewY(0deg) scale(1, 1); } .state-one .animated-logo { -webkit-transform: translate3d(0, 0, 0) rotateY(0deg) skewY(0deg) scale(1, 1); + -moz-transform: translate3d(0, 0, 0) rotateY(0deg) skewY(0deg) scale(1, 1); + -ms-transform: translate3d(0, 0, 0) rotateY(0deg) skewY(0deg) scale(1, 1); + -o-transform: translate3d(0, 0, 0) rotateY(0deg) skewY(0deg) scale(1, 1); + transform: translate3d(0, 0, 0) rotateY(0deg) skewY(0deg) scale(1, 1); } .state-one.state-two.state-three.state-four .animated-logo { -webkit-transform-origin: 100% 0; + -moz-transform-origin: 100% 0; + -ms-transform-origin: 100% 0; + -o-transform-origin: 100% 0; + transform-origin: 100% 0; -webkit-transform: translate3d(0, 10px, 0) rotateY(-45deg) skewY(22deg) scale(1.26, 1); + -moz-transform: translate3d(0, 10px, 0) rotateY(-45deg) skewY(22deg) scale(1.26, 1); + -ms-transform: translate3d(0, 10px, 0) rotateY(-45deg) skewY(22deg) scale(1.26, 1); + -o-transform: translate3d(0, 10px, 0) rotateY(-45deg) skewY(22deg) scale(1.26, 1); + transform: translate3d(0, 10px, 0) rotateY(-45deg) skewY(22deg) scale(1.26, 1); } .state-one.state-two.state-three.state-four .white-block { background-color: #ffffff; @@ -682,77 +726,90 @@ body.page-home #footer { background-color: rgba(255, 255, 255, 0); border: 1px solid #fff; -webkit-transition: opacity 300ms ease-out, -webkit-transform 300ms ease-out, background-color 300ms ease-out; + -moz-transition: opacity 300ms ease-out, -moz-transform 300ms ease-out, background-color 300ms ease-out; + -ms-transition: opacity 300ms ease-out, -ms-transform 300ms ease-out, background-color 300ms ease-out; + -o-transition: opacity 300ms ease-out, -o-transform 300ms ease-out, background-color 300ms ease-out; + transition: opacity 300ms ease-out, transform 300ms ease-out, background-color 300ms ease-out; } -.block-one, -.block-two, -.block-three, -.block-four { +.block-1, +.block-2, +.block-3, +.block-4 { top: 0; left: 72px; -webkit-transform-origin: 50% 50%; + -moz-transform-origin: 50% 50%; + -ms-transform-origin: 50% 50%; + -o-transform-origin: 50% 50%; + transform-origin: 50% 50%; -webkit-transform: translate3d(0, 0, 0); + -moz-transform: translate3d(0, 0, 0); + -ms-transform: translate3d(0, 0, 0); + -o-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); } -.block-one { +.block-1 { opacity: 0; -webkit-transform: translate3d(0, 0, 0) scale(0, 0); + -moz-transform: translate3d(0, 0, 0) scale(0, 0); + -ms-transform: translate3d(0, 0, 0) scale(0, 0); + -o-transform: translate3d(0, 0, 0) scale(0, 0); + transform: translate3d(0, 0, 0) scale(0, 0); } -.block-two { +.block-2 { opacity: 0; top: 0; left: 0; -webkit-transform: translate3d(0, 0, 0) scale(0, 0); + -moz-transform: translate3d(0, 0, 0) scale(0, 0); + -ms-transform: translate3d(0, 0, 0) scale(0, 0); + -o-transform: translate3d(0, 0, 0) scale(0, 0); + transform: translate3d(0, 0, 0) scale(0, 0); } -.block-three { +.block-3 { opacity: 0; top: 72px; - /* -webkit-transform:translate3d(0,-100px,0) scaleY(1); */ -webkit-transform: translate3d(0, 0, 0) scale(0, 0); + -moz-transform: translate3d(0, 0, 0) scale(0, 0); + -ms-transform: translate3d(0, 0, 0) scale(0, 0); + -o-transform: translate3d(0, 0, 0) scale(0, 0); + transform: translate3d(0, 0, 0) scale(0, 0); } -.block-four { +.block-4 { -webkit-transform-origin: 0 0; + -moz-transform-origin: 0 0; + -ms-transform-origin: 0 0; + -o-transform-origin: 0 0; + transform-origin: 0 0; -webkit-transform: translate3d(72px, -2px, 0) rotateY(90deg) skewY(-22deg) scaleX(1.25); + -moz-transform: translate3d(72px, -2px, 0) rotateY(90deg) skewY(-22deg) scaleX(1.25); + -ms-transform: translate3d(72px, -2px, 0) rotateY(90deg) skewY(-22deg) scaleX(1.25); + -o-transform: translate3d(72px, -2px, 0) rotateY(90deg) skewY(-22deg) scaleX(1.25); + transform: translate3d(72px, -2px, 0) rotateY(90deg) skewY(-22deg) scaleX(1.25); } -.state-one.state-two .block-one { +.state-one.state-two .block-1 { opacity: 1; -webkit-transform: translate3d(0, 0, 0) scale(1, 1); - /* -webkit-animation:PopIn 300ms 1 ease-in; */ - /* animation:PopIn 300ms 1 ease-in; */ + -moz-transform: translate3d(0, 0, 0) scale(1, 1); + -ms-transform: translate3d(0, 0, 0) scale(1, 1); + -o-transform: translate3d(0, 0, 0) scale(1, 1); + transform: translate3d(0, 0, 0) scale(1, 1); } -.state-one .block-two { +.state-one .block-2 { opacity: 1; -webkit-transform: translate3d(0, 0, 0) scale(1, 1); - /* -webkit-animation:PopIn 300ms 1 ease-in; */ - /* animation:PopIn 300ms 1 ease-in; */ + -moz-transform: translate3d(0, 0, 0) scale(1, 1); + -ms-transform: translate3d(0, 0, 0) scale(1, 1); + -o-transform: translate3d(0, 0, 0) scale(1, 1); + transform: translate3d(0, 0, 0) scale(1, 1); } -.state-one.state-two.state-three .block-three { +.state-one.state-two.state-three .block-3 { opacity: 1; -webkit-transform: translate3d(0, 0, 0) scale(1, 1); - /* -webkit-animation:PopIn 300ms 1 ease-in; */ - /* animation:PopIn 300ms 1 ease-in; */ -} -@-webkit-keyframes PopIn { - 0% { - opacity: 0; - -webkit-transform: translate3d(0, 0, 0) scale(0); - -webkit-animation-timing-function: ease-out; - animation-timing-function: ease-out; - } - 40% { - opacity: 1; - -webkit-transform: translate3d(0, 0, 0) scale(1.2); - -webkit-animation-timing-function: ease-out; - animation-timing-function: ease-out; - } - 70% { - opacity: 1; - -webkit-transform: translate3d(0, 0, 0) scale(0.9); - -webkit-animation-timing-function: ease-out; - animation-timing-function: ease-out; - } - 100% { - opacity: 1; - -webkit-transform: translate3d(0, 0, 0) scale(1); - } + -moz-transform: translate3d(0, 0, 0) scale(1, 1); + -ms-transform: translate3d(0, 0, 0) scale(1, 1); + -o-transform: translate3d(0, 0, 0) scale(1, 1); + transform: translate3d(0, 0, 0) scale(1, 1); } .outline-btn { background-color: transparent;