diff --git a/website/source/javascripts/app/Engine.Polygon.js b/website/source/javascripts/app/Engine.Polygon.js index 819d722ec..64fc14f94 100644 --- a/website/source/javascripts/app/Engine.Polygon.js +++ b/website/source/javascripts/app/Engine.Polygon.js @@ -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(); } diff --git a/website/source/javascripts/app/Engine.js b/website/source/javascripts/app/Engine.js index ad7945d6b..23a980745 100644 --- a/website/source/javascripts/app/Engine.js +++ b/website/source/javascripts/app/Engine.js @@ -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(){ diff --git a/website/source/stylesheets/_jumbotron.less b/website/source/stylesheets/_jumbotron.less index 5d51b1e98..e0c47021e 100755 --- a/website/source/stylesheets/_jumbotron.less +++ b/website/source/stylesheets/_jumbotron.less @@ -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 { diff --git a/website/source/stylesheets/main.css b/website/source/stylesheets/main.css index f1aee6cc4..ae6773f03 100644 --- a/website/source/stylesheets/main.css +++ b/website/source/stylesheets/main.css @@ -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;