Animation improvements, added Chainable
This commit is contained in:
parent
35945d6c2d
commit
9d2c13135a
|
@ -1,6 +1,11 @@
|
||||||
/* jshint unused: false */
|
/* jshint unused: false */
|
||||||
/* global console */
|
/* global console */
|
||||||
(function(Base, Vector, Logo){
|
(function(
|
||||||
|
Base,
|
||||||
|
Vector,
|
||||||
|
Logo,
|
||||||
|
Chainable
|
||||||
|
){
|
||||||
|
|
||||||
var sqrt, pow, Engine;
|
var sqrt, pow, Engine;
|
||||||
|
|
||||||
|
@ -29,8 +34,7 @@ Engine = Base.extend({
|
||||||
_deferredParticles: [],
|
_deferredParticles: [],
|
||||||
_deferredShapes: [],
|
_deferredShapes: [],
|
||||||
|
|
||||||
constructor: function(canvas, bg){
|
constructor: function(canvas, image){
|
||||||
var image, el;
|
|
||||||
if (typeof canvas === 'string') {
|
if (typeof canvas === 'string') {
|
||||||
this.canvas = document.getElementById(canvas);
|
this.canvas = document.getElementById(canvas);
|
||||||
} else {
|
} else {
|
||||||
|
@ -47,7 +51,7 @@ Engine = Base.extend({
|
||||||
this.resize();
|
this.resize();
|
||||||
window.addEventListener('resize', this.resize, false);
|
window.addEventListener('resize', this.resize, false);
|
||||||
|
|
||||||
this.setupStarfield(bg);
|
this.setupStarfield();
|
||||||
this.setupTessellation();
|
this.setupTessellation();
|
||||||
|
|
||||||
this.last = Date.now() / 1000;
|
this.last = Date.now() / 1000;
|
||||||
|
@ -59,24 +63,38 @@ Engine = Base.extend({
|
||||||
|
|
||||||
this.canvas.style.opacity = 1;
|
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.webkitTransform = 'translate3d(0,0,0) scale(1)';
|
||||||
image.style.opacity = 1;
|
image.style.opacity = 1;
|
||||||
|
|
||||||
el = document.body;
|
new Chainable()
|
||||||
|
.wait(3000)
|
||||||
setTimeout(function() {
|
.then(function(){
|
||||||
el.className += ' state-one';
|
parent.className += ' state-one';
|
||||||
setTimeout(function() {
|
})
|
||||||
el.className += ' state-two';
|
.wait(150)
|
||||||
setTimeout(function() {
|
.then(function(){
|
||||||
el.className += ' state-three';
|
parent.className += ' state-two';
|
||||||
setTimeout(function() {
|
})
|
||||||
el.className += ' state-four';
|
.wait(150)
|
||||||
}, 550);
|
.then(function(){
|
||||||
}, 200);
|
parent.className += ' state-three';
|
||||||
}, 200);
|
})
|
||||||
}, 4000);
|
.wait(500)
|
||||||
|
.then(function(){
|
||||||
|
parent.className += ' state-four';
|
||||||
|
})
|
||||||
|
.wait(100)
|
||||||
|
.then(function(){
|
||||||
|
this.showShapes = true;
|
||||||
|
}, this);
|
||||||
},
|
},
|
||||||
|
|
||||||
setupStarfield: function(){
|
setupStarfield: function(){
|
||||||
|
@ -98,8 +116,7 @@ Engine = Base.extend({
|
||||||
},
|
},
|
||||||
|
|
||||||
render: function(){
|
render: function(){
|
||||||
var scale = this.scale,
|
var scale = this.scale;
|
||||||
tick;
|
|
||||||
|
|
||||||
if (window.scrollY > 700) {
|
if (window.scrollY > 700) {
|
||||||
window.requestAnimationFrame(this.render);
|
window.requestAnimationFrame(this.render);
|
||||||
|
@ -115,12 +132,11 @@ Engine = Base.extend({
|
||||||
|
|
||||||
this.now = Date.now() / 1000;
|
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.renderStarfield(this.now);
|
||||||
this.tick = tick;
|
|
||||||
|
|
||||||
if (this.now - this.start > 5) {
|
if (this.showShapes) {
|
||||||
this.renderTessellation(this.now);
|
this.renderTessellation(this.now);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -222,4 +238,9 @@ Engine.clone = function(ref) {
|
||||||
|
|
||||||
window.Engine = Engine;
|
window.Engine = Engine;
|
||||||
|
|
||||||
})(window.Base, window.Vector, window.Logo);
|
})(
|
||||||
|
window.Base,
|
||||||
|
window.Vector,
|
||||||
|
window.Logo,
|
||||||
|
window.Chainable
|
||||||
|
);
|
||||||
|
|
|
@ -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;
|
||||||
|
|
||||||
|
})();
|
|
@ -25,6 +25,7 @@
|
||||||
<script type="text/javascript" src="/javascripts/lib/Base.js"></script>
|
<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/String.substitute.js"></script>
|
||||||
<script type="text/javascript" src="/javascripts/lib/Vector.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/Logo.js"></script>
|
||||||
<script type="text/javascript" src="/javascripts/app/Shapes.js"></script>
|
<script type="text/javascript" src="/javascripts/app/Shapes.js"></script>
|
||||||
<script type="text/javascript" src="/javascripts/app/Engine.js"></script>
|
<script type="text/javascript" src="/javascripts/app/Engine.js"></script>
|
||||||
|
|
|
@ -101,13 +101,19 @@
|
||||||
opacity:1;
|
opacity:1;
|
||||||
|
|
||||||
-webkit-transition:-webkit-transform 300ms ease-in-out;
|
-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-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 {
|
.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 {
|
.state-one.state-two.state-three.state-four .white-block {
|
||||||
|
@ -128,10 +134,9 @@
|
||||||
background-color:rgba(255,255,255,0);
|
background-color:rgba(255,255,255,0);
|
||||||
|
|
||||||
border:1px solid #fff;
|
border:1px solid #fff;
|
||||||
}
|
|
||||||
|
|
||||||
.state-one .white-block {
|
|
||||||
-webkit-transition:
|
-webkit-transition:
|
||||||
|
opacity 300ms ease-out,
|
||||||
-webkit-transform 300ms ease-out,
|
-webkit-transform 300ms ease-out,
|
||||||
background-color 300ms ease-out;
|
background-color 300ms ease-out;
|
||||||
}
|
}
|
||||||
|
@ -149,19 +154,21 @@
|
||||||
|
|
||||||
.block-one {
|
.block-one {
|
||||||
opacity:0;
|
opacity:0;
|
||||||
|
-webkit-transform:translate3d(0,0,0) scale(0,0);
|
||||||
}
|
}
|
||||||
|
|
||||||
.block-two {
|
.block-two {
|
||||||
opacity:0;
|
opacity:0;
|
||||||
top:0;
|
top:0;
|
||||||
left:0;
|
left:0;
|
||||||
-webkit-transform:translate3d(0,0,0) scaleX(1);
|
-webkit-transform:translate3d(0,0,0) scale(0,0);
|
||||||
}
|
}
|
||||||
|
|
||||||
.block-three {
|
.block-three {
|
||||||
opacity:0;
|
opacity:0;
|
||||||
top:72px;
|
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 {
|
.block-four {
|
||||||
|
@ -169,22 +176,25 @@
|
||||||
-webkit-transform:translate3d(72px,-2px,0) rotateY(90deg) skewY(-22deg) scaleX(1.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;
|
opacity:1;
|
||||||
-webkit-animation:PopIn 300ms 1 ease-in;
|
-webkit-transform:translate3d(0,0,0) scale(1,1);
|
||||||
animation:PopIn 300ms 1 ease-in;
|
/* -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;
|
opacity:1;
|
||||||
-webkit-animation:PopIn 300ms 1 ease-in;
|
-webkit-transform:translate3d(0,0,0) scale(1,1);
|
||||||
animation:PopIn 300ms 1 ease-in;
|
/* -webkit-animation:PopIn 300ms 1 ease-in; */
|
||||||
|
/* animation:PopIn 300ms 1 ease-in; */
|
||||||
}
|
}
|
||||||
|
|
||||||
.state-one.state-two.state-three .block-three {
|
.state-one.state-two.state-three .block-three {
|
||||||
opacity:1;
|
opacity:1;
|
||||||
-webkit-animation:PopIn 300ms 1 ease-in;
|
-webkit-transform:translate3d(0,0,0) scale(1,1);
|
||||||
animation:PopIn 300ms 1 ease-in;
|
/* -webkit-animation:PopIn 300ms 1 ease-in; */
|
||||||
|
/* animation:PopIn 300ms 1 ease-in; */
|
||||||
}
|
}
|
||||||
|
|
||||||
@-webkit-keyframes PopIn {
|
@-webkit-keyframes PopIn {
|
||||||
|
|
|
@ -654,12 +654,16 @@ body.page-home #footer {
|
||||||
margin: -28px 0 0 -115px;
|
margin: -28px 0 0 -115px;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
-webkit-transition: -webkit-transform 300ms ease-in-out;
|
-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-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 {
|
.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 {
|
.state-one.state-two.state-three.state-four .white-block {
|
||||||
background-color: #ffffff;
|
background-color: #ffffff;
|
||||||
|
@ -675,9 +679,7 @@ body.page-home #footer {
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
background-color: rgba(255, 255, 255, 0);
|
background-color: rgba(255, 255, 255, 0);
|
||||||
border: 1px solid #fff;
|
border: 1px solid #fff;
|
||||||
}
|
-webkit-transition: opacity 300ms ease-out, -webkit-transform 300ms ease-out, background-color 300ms ease-out;
|
||||||
.state-one .white-block {
|
|
||||||
-webkit-transition: -webkit-transform 300ms ease-out, background-color 300ms ease-out;
|
|
||||||
}
|
}
|
||||||
.block-one,
|
.block-one,
|
||||||
.block-two,
|
.block-two,
|
||||||
|
@ -690,36 +692,41 @@ body.page-home #footer {
|
||||||
}
|
}
|
||||||
.block-one {
|
.block-one {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
|
-webkit-transform: translate3d(0, 0, 0) scale(0, 0);
|
||||||
}
|
}
|
||||||
.block-two {
|
.block-two {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
-webkit-transform: translate3d(0, 0, 0) scaleX(1);
|
-webkit-transform: translate3d(0, 0, 0) scale(0, 0);
|
||||||
}
|
}
|
||||||
.block-three {
|
.block-three {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
top: 72px;
|
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 {
|
.block-four {
|
||||||
-webkit-transform-origin: 0 0;
|
-webkit-transform-origin: 0 0;
|
||||||
-webkit-transform: translate3d(72px, -2px, 0) rotateY(90deg) skewY(-22deg) scaleX(1.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;
|
opacity: 1;
|
||||||
-webkit-animation: PopIn 300ms 1 ease-in;
|
-webkit-transform: translate3d(0, 0, 0) scale(1, 1);
|
||||||
animation: PopIn 300ms 1 ease-in;
|
/* -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;
|
opacity: 1;
|
||||||
-webkit-animation: PopIn 300ms 1 ease-in;
|
-webkit-transform: translate3d(0, 0, 0) scale(1, 1);
|
||||||
animation: PopIn 300ms 1 ease-in;
|
/* -webkit-animation:PopIn 300ms 1 ease-in; */
|
||||||
|
/* animation:PopIn 300ms 1 ease-in; */
|
||||||
}
|
}
|
||||||
.state-one.state-two.state-three .block-three {
|
.state-one.state-two.state-three .block-three {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
-webkit-animation: PopIn 300ms 1 ease-in;
|
-webkit-transform: translate3d(0, 0, 0) scale(1, 1);
|
||||||
animation: PopIn 300ms 1 ease-in;
|
/* -webkit-animation:PopIn 300ms 1 ease-in; */
|
||||||
|
/* animation:PopIn 300ms 1 ease-in; */
|
||||||
}
|
}
|
||||||
@-webkit-keyframes PopIn {
|
@-webkit-keyframes PopIn {
|
||||||
0% {
|
0% {
|
||||||
|
|
Loading…
Reference in New Issue