ResiLien
/
terraform
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Animation improvements, added Chainable

This commit is contained in:
Amadeus Demarzi 2014-07-24 23:37:41 -07:00
parent 35945d6c2d
commit 9d2c13135a
5 changed files with 169 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
website/source/javascripts/app/Engine.js
View File

@ -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
);

74
website/source/javascripts/lib/Chainable.js Normal file
View File

@ -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;
})();

1
website/source/layouts/_footer.erb
View File

@ -25,6 +25,7 @@
<script type="text/javascript" src="/javascripts/lib/Base.js"></script>
<script type="text/javascript" src="/javascripts/lib/String.substitute.js"></script>
<script type="text/javascript" src="/javascripts/lib/Vector.js"></script>
<script type="text/javascript" src="/javascripts/lib/Chainable.js"></script>
<script type="text/javascript" src="/javascripts/app/Logo.js"></script>
<script type="text/javascript" src="/javascripts/app/Shapes.js"></script>
<script type="text/javascript" src="/javascripts/app/Engine.js"></script>

40
website/source/stylesheets/_jumbotron.less
View File

@ -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 {

39
website/source/stylesheets/main.css
View File

@ -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% {