diff --git a/website/source/javascripts/app/Engine.js b/website/source/javascripts/app/Engine.js
index da7645753a..8090f2f45e 100644
--- a/website/source/javascripts/app/Engine.js
+++ b/website/source/javascripts/app/Engine.js
@@ -1,6 +1,11 @@
/* jshint unused: false */
/* global console */
-(function(Base, Vector, Logo){
+(function(
+ Base,
+ Vector,
+ Logo,
+ Chainable
+){
var sqrt, pow, Engine;
@@ -29,8 +34,7 @@ Engine = Base.extend({
_deferredParticles: [],
_deferredShapes: [],
- constructor: function(canvas, bg){
- var image, el;
+ constructor: function(canvas, image){
if (typeof canvas === 'string') {
this.canvas = document.getElementById(canvas);
} else {
@@ -47,7 +51,7 @@ Engine = Base.extend({
this.resize();
window.addEventListener('resize', this.resize, false);
- this.setupStarfield(bg);
+ this.setupStarfield();
this.setupTessellation();
this.last = Date.now() / 1000;
@@ -59,24 +63,38 @@ Engine = Base.extend({
this.canvas.style.opacity = 1;
- image = document.getElementById(bg);
+ this.cssAnimations(
+ document.getElementById(image)
+ );
+ },
+
+ cssAnimations: function(image){
+ var parent = this.canvas.parentNode;
+
image.style.webkitTransform = 'translate3d(0,0,0) scale(1)';
image.style.opacity = 1;
- el = document.body;
-
- setTimeout(function() {
- el.className += ' state-one';
- setTimeout(function() {
- el.className += ' state-two';
- setTimeout(function() {
- el.className += ' state-three';
- setTimeout(function() {
- el.className += ' state-four';
- }, 550);
- }, 200);
- }, 200);
- }, 4000);
+ new Chainable()
+ .wait(3000)
+ .then(function(){
+ parent.className += ' state-one';
+ })
+ .wait(150)
+ .then(function(){
+ parent.className += ' state-two';
+ })
+ .wait(150)
+ .then(function(){
+ parent.className += ' state-three';
+ })
+ .wait(500)
+ .then(function(){
+ parent.className += ' state-four';
+ })
+ .wait(100)
+ .then(function(){
+ this.showShapes = true;
+ }, this);
},
setupStarfield: function(){
@@ -98,8 +116,7 @@ Engine = Base.extend({
},
render: function(){
- var scale = this.scale,
- tick;
+ var scale = this.scale;
if (window.scrollY > 700) {
window.requestAnimationFrame(this.render);
@@ -115,12 +132,11 @@ Engine = Base.extend({
this.now = Date.now() / 1000;
- tick = Math.min(this.now - this.last, 0.017);
+ this.tick = Math.min(this.now - this.last, 0.017);
this.renderStarfield(this.now);
- this.tick = tick;
- if (this.now - this.start > 5) {
+ if (this.showShapes) {
this.renderTessellation(this.now);
}
@@ -222,4 +238,9 @@ Engine.clone = function(ref) {
window.Engine = Engine;
-})(window.Base, window.Vector, window.Logo);
+})(
+ window.Base,
+ window.Vector,
+ window.Logo,
+ window.Chainable
+);
diff --git a/website/source/javascripts/lib/Chainable.js b/website/source/javascripts/lib/Chainable.js
new file mode 100644
index 0000000000..edb7f17570
--- /dev/null
+++ b/website/source/javascripts/lib/Chainable.js
@@ -0,0 +1,74 @@
+(function(){
+
+var Chainable = function(){
+ this._chain = [];
+ this._cycle = this._cycle.bind(this);
+};
+
+Chainable.prototype._running = false;
+
+Chainable.prototype.start = function(){
+ if (this._running || !this._chain.length) {
+ return this;
+ }
+ this._running = true;
+ return this._cycle();
+};
+
+Chainable.prototype.reset = function(){
+ if (!this._running) {
+ return this;
+ }
+ clearTimeout(this._timer);
+ this._timer = null;
+ this._chain.length = 0;
+ this._running = false;
+ return this;
+};
+
+Chainable.prototype._cycle = function(){
+ var current;
+ if (!this._chain.length) {
+ return this.reset();
+ }
+
+ current = this._chain.shift();
+
+ if (current.type === 'function') {
+ current.func.apply(current.scope, current.args);
+ current = null;
+ return this._cycle();
+ }
+ if (current.type === 'wait') {
+ clearTimeout(this._timer);
+ this._timer = setTimeout(this._cycle, current.time || 0);
+ current = null;
+ }
+
+ return this;
+};
+
+Chainable.prototype.then = Chainable.prototype.exec = function(func, scope, args){
+ this._chain.push({
+ type : 'function',
+
+ func : func,
+ scope : scope || window,
+ args : args || []
+ });
+
+ return this.start();
+};
+
+Chainable.prototype.wait = function(time){
+ this._chain.push({
+ type : 'wait',
+ time : time
+ });
+
+ return this.start();
+};
+
+window.Chainable = Chainable;
+
+})();
diff --git a/website/source/layouts/_footer.erb b/website/source/layouts/_footer.erb
index d1406d49de..3d97c14175 100644
--- a/website/source/layouts/_footer.erb
+++ b/website/source/layouts/_footer.erb
@@ -25,6 +25,7 @@
+
diff --git a/website/source/stylesheets/_jumbotron.less b/website/source/stylesheets/_jumbotron.less
index e0c47021ec..490e180b3d 100755
--- a/website/source/stylesheets/_jumbotron.less
+++ b/website/source/stylesheets/_jumbotron.less
@@ -101,13 +101,19 @@
opacity:1;
-webkit-transition:-webkit-transform 300ms ease-in-out;
- -webkit-transform-origin:100% 0;
+
+ -webkit-transform-origin:50% 50%;
-webkit-transform-style:preserve-3d;
- -webkit-transform:translate3d(0,0,0) rotateY(0deg) skewY(0deg) scaleX(1);
+ -webkit-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);
}
.state-one.state-two.state-three.state-four .animated-logo {
- -webkit-transform:translate3d(0,10px,0) rotateY(-45deg) skewY(22deg) scaleX(1.26);
+ -webkit-transform-origin:100% 0;
+ -webkit-transform:translate3d(0,10px,0) rotateY(-45deg) skewY(22deg) scale(1.26,1);
}
.state-one.state-two.state-three.state-four .white-block {
@@ -128,10 +134,9 @@
background-color:rgba(255,255,255,0);
border:1px solid #fff;
-}
-.state-one .white-block {
-webkit-transition:
+ opacity 300ms ease-out,
-webkit-transform 300ms ease-out,
background-color 300ms ease-out;
}
@@ -149,19 +154,21 @@
.block-one {
opacity:0;
+ -webkit-transform:translate3d(0,0,0) scale(0,0);
}
.block-two {
opacity:0;
top:0;
left:0;
- -webkit-transform:translate3d(0,0,0) scaleX(1);
+ -webkit-transform:translate3d(0,0,0) scale(0,0);
}
.block-three {
opacity:0;
top:72px;
- -webkit-transform:translate3d(0,0,0) scaleY(1);
+ /* -webkit-transform:translate3d(0,-100px,0) scaleY(1); */
+ -webkit-transform:translate3d(0,0,0) scale(0,0);
}
.block-four {
@@ -169,22 +176,25 @@
-webkit-transform:translate3d(72px,-2px,0) rotateY(90deg) skewY(-22deg) scaleX(1.25);
}
-.state-one .block-one {
+.state-one.state-two .block-one {
opacity:1;
- -webkit-animation:PopIn 300ms 1 ease-in;
- animation:PopIn 300ms 1 ease-in;
+ -webkit-transform:translate3d(0,0,0) scale(1,1);
+ /* -webkit-animation:PopIn 300ms 1 ease-in; */
+ /* animation:PopIn 300ms 1 ease-in; */
}
-.state-one.state-two .block-two {
+.state-one .block-two {
opacity:1;
- -webkit-animation:PopIn 300ms 1 ease-in;
- animation:PopIn 300ms 1 ease-in;
+ -webkit-transform:translate3d(0,0,0) scale(1,1);
+ /* -webkit-animation:PopIn 300ms 1 ease-in; */
+ /* animation:PopIn 300ms 1 ease-in; */
}
.state-one.state-two.state-three .block-three {
opacity:1;
- -webkit-animation:PopIn 300ms 1 ease-in;
- animation:PopIn 300ms 1 ease-in;
+ -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 {
diff --git a/website/source/stylesheets/main.css b/website/source/stylesheets/main.css
index cf66458e96..1422bafcfc 100644
--- a/website/source/stylesheets/main.css
+++ b/website/source/stylesheets/main.css
@@ -654,12 +654,16 @@ body.page-home #footer {
margin: -28px 0 0 -115px;
opacity: 1;
-webkit-transition: -webkit-transform 300ms ease-in-out;
- -webkit-transform-origin: 100% 0;
+ -webkit-transform-origin: 50% 50%;
-webkit-transform-style: preserve-3d;
- -webkit-transform: translate3d(0, 0, 0) rotateY(0deg) skewY(0deg) scaleX(1);
+ -webkit-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);
}
.state-one.state-two.state-three.state-four .animated-logo {
- -webkit-transform: translate3d(0, 10px, 0) rotateY(-45deg) skewY(22deg) scaleX(1.26);
+ -webkit-transform-origin: 100% 0;
+ -webkit-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;
@@ -675,9 +679,7 @@ body.page-home #footer {
background-color: #fff;
background-color: rgba(255, 255, 255, 0);
border: 1px solid #fff;
-}
-.state-one .white-block {
- -webkit-transition: -webkit-transform 300ms ease-out, background-color 300ms ease-out;
+ -webkit-transition: opacity 300ms ease-out, -webkit-transform 300ms ease-out, background-color 300ms ease-out;
}
.block-one,
.block-two,
@@ -690,36 +692,41 @@ body.page-home #footer {
}
.block-one {
opacity: 0;
+ -webkit-transform: translate3d(0, 0, 0) scale(0, 0);
}
.block-two {
opacity: 0;
top: 0;
left: 0;
- -webkit-transform: translate3d(0, 0, 0) scaleX(1);
+ -webkit-transform: translate3d(0, 0, 0) scale(0, 0);
}
.block-three {
opacity: 0;
top: 72px;
- -webkit-transform: translate3d(0, 0, 0) scaleY(1);
+ /* -webkit-transform:translate3d(0,-100px,0) scaleY(1); */
+ -webkit-transform: translate3d(0, 0, 0) scale(0, 0);
}
.block-four {
-webkit-transform-origin: 0 0;
-webkit-transform: translate3d(72px, -2px, 0) rotateY(90deg) skewY(-22deg) scaleX(1.25);
}
-.state-one .block-one {
+.state-one.state-two .block-one {
opacity: 1;
- -webkit-animation: PopIn 300ms 1 ease-in;
- animation: PopIn 300ms 1 ease-in;
+ -webkit-transform: translate3d(0, 0, 0) scale(1, 1);
+ /* -webkit-animation:PopIn 300ms 1 ease-in; */
+ /* animation:PopIn 300ms 1 ease-in; */
}
-.state-one.state-two .block-two {
+.state-one .block-two {
opacity: 1;
- -webkit-animation: PopIn 300ms 1 ease-in;
- animation: PopIn 300ms 1 ease-in;
+ -webkit-transform: translate3d(0, 0, 0) scale(1, 1);
+ /* -webkit-animation:PopIn 300ms 1 ease-in; */
+ /* animation:PopIn 300ms 1 ease-in; */
}
.state-one.state-two.state-three .block-three {
opacity: 1;
- -webkit-animation: PopIn 300ms 1 ease-in;
- animation: PopIn 300ms 1 ease-in;
+ -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% {