Improving the overall intro animation
This commit is contained in:
parent
c511d6e543
commit
dd7b065434
|
@ -9,15 +9,21 @@ Engine.Polygon = function(a, b, c, color){
|
|||
this.c = c;
|
||||
|
||||
this.color = color;
|
||||
this.maxS = this.color.s;
|
||||
this.maxL = this.color.l;
|
||||
this.strokeColor = {
|
||||
h: this.color.h,
|
||||
s: 0,
|
||||
l: 100,
|
||||
a: 1
|
||||
};
|
||||
|
||||
// this.color.s = 0;
|
||||
this.color.l = 0;
|
||||
|
||||
this.start = Date.now() / 1000;
|
||||
|
||||
this.fillStyle = this.hslaTemplate.substitute(this.color);
|
||||
this.strokeStyle = this.hslaTemplate.substitute({
|
||||
|
||||
});
|
||||
|
||||
// this.up = !!Engine.getRandomInt(0,1);
|
||||
// this.hueShiftSpeed = 15;
|
||||
|
@ -32,28 +38,33 @@ Engine.Polygon.prototype = {
|
|||
hslaTemplate: 'hsla({h},{s}%,{l}%,{a})',
|
||||
|
||||
hueShiftSpeed: 20,
|
||||
duration: 3,
|
||||
delay: 2.5,
|
||||
duration: 2,
|
||||
delay: 0,
|
||||
start: 0,
|
||||
|
||||
// Determine color fill?
|
||||
update: function(engine){
|
||||
var delta;
|
||||
|
||||
delta = engine.now - this.start;
|
||||
this.start += engine.tick;
|
||||
|
||||
delta = this.start;
|
||||
|
||||
if (
|
||||
delta > this.delay &&
|
||||
delta < this.delay + this.duration + 1 &&
|
||||
this.color.l < this.maxL
|
||||
) {
|
||||
// this.color.s = this.maxS * delta / this.duration;
|
||||
this.color.l = this.maxL * (delta - this.delay) / this.duration;
|
||||
|
||||
this.strokeColor.s = this.color.s * (delta - this.delay) / this.duration;
|
||||
this.strokeColor.l = (this.maxL - 100) * (delta - this.delay) / this.duration + 100;
|
||||
|
||||
if (this.color.l > this.maxL) {
|
||||
// this.color.s = this.maxS;
|
||||
this.color.l = this.maxL;
|
||||
}
|
||||
|
||||
this.strokeStyle = this.hslaTemplate.substitute(this.strokeColor);
|
||||
this.fillStyle = this.hslaTemplate.substitute(this.color);
|
||||
}
|
||||
},
|
||||
|
@ -75,7 +86,7 @@ Engine.Polygon.prototype = {
|
|||
ctx.closePath();
|
||||
ctx.fillStyle = this.fillStyle;
|
||||
ctx.lineWidth = 0.25 * scale;
|
||||
ctx.strokeStyle = this.fillStyle;
|
||||
ctx.strokeStyle = this.strokeStyle;
|
||||
ctx.fill();
|
||||
ctx.stroke();
|
||||
}
|
||||
|
|
|
@ -66,7 +66,6 @@ Engine = Base.extend({
|
|||
image.style.webkitTransform = 'translate3d(0,0,0) scale(1)';
|
||||
image.style.opacity = 1;
|
||||
|
||||
|
||||
el = document.body;
|
||||
|
||||
setTimeout(function() {
|
||||
|
@ -119,21 +118,24 @@ Engine = Base.extend({
|
|||
render: function(){
|
||||
var tick;
|
||||
|
||||
this.context.clearRect(
|
||||
0,
|
||||
0,
|
||||
this.width * this.scale,
|
||||
this.height * this.scale
|
||||
);
|
||||
if (window.scrollY > 700) {
|
||||
window.requestAnimationFrame(this.render);
|
||||
return;
|
||||
}
|
||||
|
||||
// this.context.clearRect(
|
||||
// 0,
|
||||
// 0,
|
||||
// this.width * this.scale,
|
||||
// this.height * this.scale
|
||||
// );
|
||||
|
||||
// Potentially more performant than clearRect
|
||||
this.canvas.width = this.width * this.scale;
|
||||
this.canvas.height = 700 * this.scale;
|
||||
|
||||
this.now = Date.now() / 1000;
|
||||
|
||||
// if (this.slow) {
|
||||
// this.speed = Math.max(0.1, this.speed - this.accel);
|
||||
// } else {
|
||||
// this.speed = Math.min(1, this.speed + this.accel);
|
||||
// }
|
||||
|
||||
tick = Math.min(this.now - this.last, 0.017);
|
||||
this.tick = this.speed * tick;
|
||||
|
||||
|
@ -141,7 +143,6 @@ Engine = Base.extend({
|
|||
this.tick = tick;
|
||||
|
||||
if (this.now - this.start > 3) {
|
||||
// this.slow = true;
|
||||
this.renderTessellation(this.now);
|
||||
}
|
||||
|
||||
|
@ -183,8 +184,6 @@ Engine = Base.extend({
|
|||
|
||||
this.canvas.width = this.width * this.scale;
|
||||
this.canvas.height = this.height * this.scale;
|
||||
|
||||
window.scrollTo(0, 0);
|
||||
},
|
||||
|
||||
renderStarfield: function(){
|
||||
|
|
|
@ -27,6 +27,7 @@
|
|||
left:0;
|
||||
width:100%;
|
||||
height:100%;
|
||||
/* background-color:#000; */
|
||||
opacity:0;
|
||||
|
||||
-webkit-transition:opacity 2s ease-out;
|
||||
|
@ -109,16 +110,30 @@
|
|||
-webkit-transform:translate3d(0,10px,0) rotateY(-45deg) skewY(22deg) scaleX(1.26);
|
||||
}
|
||||
|
||||
.state-one.state-two.state-three.state-four .white-block {
|
||||
background-color:rgba(255,255,255,1);
|
||||
}
|
||||
|
||||
.white-block {
|
||||
position:absolute;
|
||||
width:68px;
|
||||
height:68px;
|
||||
background-color:rgba(255,0,0,0.3);
|
||||
|
||||
-webkit-box-sizing:border-box;
|
||||
-moz-box-sizing:border-box;
|
||||
box-sizing:border-box;
|
||||
|
||||
/* background-color:rgba(255,0,0,0.3); */
|
||||
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;
|
||||
-webkit-transition:
|
||||
-webkit-transform 300ms ease-out,
|
||||
background-color 300ms ease-out;
|
||||
}
|
||||
|
||||
.block-one,
|
||||
|
@ -151,7 +166,7 @@
|
|||
|
||||
.block-four {
|
||||
-webkit-transform-origin:0 0;
|
||||
-webkit-transform:translate3d(73px,-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 {
|
||||
|
|
|
@ -596,6 +596,7 @@ 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;
|
||||
|
@ -655,15 +656,23 @@ body.page-home #footer {
|
|||
.state-one.state-two.state-three.state-four .animated-logo {
|
||||
-webkit-transform: translate3d(0, 10px, 0) rotateY(-45deg) skewY(22deg) scaleX(1.26);
|
||||
}
|
||||
.state-one.state-two.state-three.state-four .white-block {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
.white-block {
|
||||
position: absolute;
|
||||
width: 68px;
|
||||
height: 68px;
|
||||
background-color: rgba(255, 0, 0, 0.3);
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
/* background-color:rgba(255,0,0,0.3); */
|
||||
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;
|
||||
-webkit-transition: -webkit-transform 300ms ease-out, background-color 300ms ease-out;
|
||||
}
|
||||
.block-one,
|
||||
.block-two,
|
||||
|
@ -690,7 +699,7 @@ body.page-home #footer {
|
|||
}
|
||||
.block-four {
|
||||
-webkit-transform-origin: 0 0;
|
||||
-webkit-transform: translate3d(73px, -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 {
|
||||
opacity: 1;
|
||||
|
|
Loading…
Reference in New Issue