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

Performance tweaks and start of static version 

* Performance improvements involve less CSS'ery
* Building a canvas API to screenshot various aspect to make static
* Static backgrounds in place... next stop, logo changes
This commit is contained in:
Amadeus Demarzi 2014-07-27 15:08:24 -07:00
parent 28a89eb328
commit 8a15d6f4c0
8 changed files with 139 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
website/source/images/bg-static.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 76 KiB

1
website/source/index.html.erb
View File

@ -1,7 +1,6 @@
<!-- Main jumbotron for a primary marketing message or call to action -->
<div id="jumbotron-mask">
<div id="jumbotron">
<div class="galaxy-image" id="galaxy-bg"></div>
<div class="jumbotron-content" id="jumbotron-content">
<h2 class="tag-line" id="tag-line">Build, Combine, and Launch Infrastucture</h2>
</div>

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

@ -174,6 +174,10 @@ Engine = Base.extend({
render: function(){
var scale = this.scale, p, particle, index;
if (this.paused) {
return;
}
if (this.scrollY > 700) {
window.requestAnimationFrame(this.render);
return;
@ -187,7 +191,6 @@ Engine = Base.extend({
);
this.now = Date.now() / 1000;
this.tick = Math.min(this.now - this.last, 0.017);
// Update all particles... may need to be optimized
@ -297,6 +300,22 @@ Engine = Base.extend({
_handleScroll: function(){
this.scrollY = window.scrollY;
},
pause: function(){
this.paused = true;
},
resume: function(){
if (!this.paused) {
return;
}
this.paused = false;
this.render();
},
getSnapshot: function(){
window.open(this.canvas.toDataURL('image/png'));
}
});

65
website/source/javascripts/app/Init.js
View File

@ -2,6 +2,24 @@
Engine
){
var isIE = (function(){
var undef,
v = 3,
div = document.createElement('div'),
all = div.getElementsByTagName('i');
while (
div.innerHTML = '<!--[if gt IE ' + (++v) + ']><i></i><![endif]-->',
all[0]
);
return v > 4 ? v : undef;
}());
// isIE = true;
var Init = {
start: function(){
@ -27,27 +45,42 @@ var Init = {
return container;
},
initializeEngine: function(){
var jumbotron = document.getElementById('jumbotron'),
content = document.getElementById('jumbotron-content'),
tagLine = document.getElementById('tag-line'),
canvas, galaxy;
if (!jumbotron) {
return;
}
galaxy = document.createElement('div');
galaxy.id = 'galaxy-bg';
galaxy.className = 'galaxy-bg';
jumbotron.appendChild(galaxy);
content.appendChild(
Init.generateAnimatedLogo()
);
canvas = document.createElement('canvas');
canvas.className = 'terraform-canvas';
jumbotron.appendChild(canvas);
window.engine = new Engine(canvas, galaxy, tagLine);
},
Pages: {
'page-home': function(){
var jumbotron = document.getElementById('jumbotron'),
content = document.getElementById('jumbotron-content'),
galaxy = document.getElementById('galaxy-bg'),
tagLine = document.getElementById('tag-line'),
canvas;
if (!jumbotron) {
var jumbotron;
if (isIE) {
jumbotron = document.getElementById('jumbotron');
jumbotron.className += ' static';
return;
}
content.appendChild(
Init.generateAnimatedLogo()
);
canvas = document.createElement('canvas');
canvas.className = 'terraform-canvas';
jumbotron.appendChild(canvas);
window.engine = new Engine(canvas, galaxy, tagLine);
Init.initializeEngine();
}
}

21
website/source/javascripts/lib/Function.prototype.bind.js Normal file
View File

@ -0,0 +1,21 @@
if (!Function.prototype.bind) {
Function.prototype.bind = function (oThis) {
if (typeof this !== "function") {
throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable");
}
var aArgs = Array.prototype.slice.call(arguments, 1),
fToBind = this,
fNOP = function () {},
fBound = function () {
return fToBind.apply(this instanceof fNOP && oThis ?
this : oThis,
aArgs.concat(Array.prototype.slice.call(arguments)));
};
fNOP.prototype = this.prototype;
fBound.prototype = new fNOP();
return fBound;
};
}

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

@ -24,6 +24,7 @@
<script type="text/javascript" src="/javascripts/lib/jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="/javascripts/lib/bootstrap.min.js"></script>
<script type="text/javascript" src="/javascripts/lib/dbg.js"></script>
<script type="text/javascript" src="/javascripts/lib/Function.prototype.bind.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/Vector.js"></script>

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

@ -4,6 +4,7 @@
#jumbotron-mask{
position:relative;
z-index:0;
height: @jumbotron-total-height;
margin-top: @negative-hero-margin;
background-color: black;
@ -16,6 +17,17 @@
padding-bottom: 0;
color: @jumbotron-color;
&.static {
background-image:url(../images/bg-galaxy.jpg);
background-position:50% 50%;
.jumbotron-content {
background-image:url(../images/bg-static.png);
background-size:cover;
background-position:50% 50%;
}
}
.terraform-canvas {
position:absolute;
top:0;
@ -52,7 +64,7 @@
transform:translate3d(0,0,0);
}
.galaxy-image {
.galaxy-bg {
position:absolute;
width:100%;
height:100%;
@ -60,38 +72,24 @@
left:0;
background-image:url(../images/bg-galaxy.jpg);
background-size:cover;
/* background-size:cover; */
background-position:50% 50%;
opacity:0;
-webkit-transition:
opacity 6s ease-out,
-webkit-transform 20s ease-out;
-moz-transition:
opacity 6s ease-out,
-moz-transform 20s ease-out;
-ms-transition:
opacity 6s ease-out,
-ms-transform 20s ease-out;
-o-transition:
opacity 6s ease-out,
-o-transform 20s ease-out;
transition:
opacity 6s ease-out,
transform 20s ease-out;
-webkit-transition:opacity 2s ease-out;
-moz-transition:opacity 2s ease-out;
-ms-transition:opacity 2s ease-out;
-o-transition:opacity 2s ease-out;
transition:opacity 2s ease-out;
-webkit-transform:translate3d(0,0,0);
-moz-transform:translate3d(0,0,0);
-ms-transform:translate3d(0,0,0);
-o-transform:translate3d(0,0,0);
transform:translate3d(0,0,0);
-webkit-transform:translate3d(0,0,0) scale(0.7);
-moz-transform:translate3d(0,0,0) scale(0.7);
-ms-transform:translate3d(0,0,0) scale(0.7);
-o-transform:translate3d(0,0,0) scale(0.7);
transform:translate3d(0,0,0) scale(0.7);
&.show {
opacity:1;
-webkit-transform:translate3d(0,0,0) scale(1);
-moz-transform:translate3d(0,0,0) scale(1);
-ms-transform:translate3d(0,0,0) scale(1);
-o-transform:translate3d(0,0,0) scale(1);
transform:translate3d(0,0,0) scale(1);
}
}
}

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

@ -586,6 +586,7 @@ body.page-home #footer {
}
#jumbotron-mask {
position: relative;
z-index: 0;
height: 700px;
margin-top: -70px;
background-color: black;
@ -597,6 +598,15 @@ body.page-home #footer {
padding-bottom: 0;
color: #ffffff;
}
#jumbotron.static {
background-image: url(../images/bg-galaxy.jpg);
background-position: 50% 50%;
}
#jumbotron.static .jumbotron-content {
background-image: url(../images/bg-static.png);
background-size: cover;
background-position: 50% 50%;
}
#jumbotron .terraform-canvas {
position: absolute;
top: 0;
@ -628,34 +638,29 @@ body.page-home #footer {
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
#jumbotron .galaxy-image {
#jumbotron .galaxy-bg {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-image: url(../images/bg-galaxy.jpg);
background-size: cover;
/* background-size:cover; */
background-position: 50% 50%;
opacity: 0;
-webkit-transition: opacity 6s ease-out, -webkit-transform 20s ease-out;
-moz-transition: opacity 6s ease-out, -moz-transform 20s ease-out;
-ms-transition: opacity 6s ease-out, -ms-transform 20s ease-out;
-o-transition: opacity 6s ease-out, -o-transform 20s ease-out;
transition: opacity 6s ease-out, transform 20s ease-out;
-webkit-transform: translate3d(0, 0, 0) scale(0.7);
-moz-transform: translate3d(0, 0, 0) scale(0.7);
-ms-transform: translate3d(0, 0, 0) scale(0.7);
-o-transform: translate3d(0, 0, 0) scale(0.7);
transform: translate3d(0, 0, 0) scale(0.7);
-webkit-transition: opacity 2s ease-out;
-moz-transition: opacity 2s ease-out;
-ms-transition: opacity 2s ease-out;
-o-transition: opacity 2s ease-out;
transition: opacity 2s ease-out;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
#jumbotron .galaxy-image.show {
#jumbotron .galaxy-bg.show {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0) scale(1);
-moz-transform: translate3d(0, 0, 0) scale(1);
-ms-transform: translate3d(0, 0, 0) scale(1);
-o-transform: translate3d(0, 0, 0) scale(1);
transform: translate3d(0, 0, 0) scale(1);
}
.tag-line {
position: absolute;