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

Added galaxy, made tweaks

This commit is contained in:
Amadeus Demarzi 2014-07-23 20:52:27 -07:00
parent c85b68f978
commit c511d6e543
5 changed files with 95 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
website/source/images/bg-galaxy.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

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

@ -1,6 +1,7 @@
<!-- Main jumbotron for a primary marketing message or call to action -->
<div id="jumbotron-mask">
<div id="jumbotron">
<div class="galaxy-image" id="image"></div>
<div class="container">
<div class="logo-container">
<div class="animated-logo">

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

@ -61,11 +61,11 @@ Engine = Base.extend({
this.render();
this.canvas.style.opacity = 1;
/*
image = document.getElementById(bg);
image.style.webkitTransform = 'translate3d(0,0,0) scale(1)';
image.style.opacity = 1;
*/
el = document.body;
@ -205,7 +205,7 @@ Engine = Base.extend({
}
}
this.generateParticles(600 * this.tick >> 0);
this.generateParticles(200 * this.tick >> 0);
}
});

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

@ -16,12 +16,30 @@
padding-bottom: 0;
color: @jumbotron-color;
.container {
position:relative;
height:700px;
}
.terraform-canvas {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
opacity:0;
-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);
}
.logo-container {
@ -34,6 +52,41 @@
-webkit-transform:translate3d(0,0,0);
}
#image {
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
background-image:url(../images/bg-galaxy.jpg);
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);
}
}
.animated-logo {
@ -53,7 +106,7 @@
}
.state-one.state-two.state-three.state-four .animated-logo {
-webkit-transform:translate3d(0,0,0) rotateY(-45deg) skewY(22deg) scaleX(1.26);
-webkit-transform:translate3d(0,10px,0) rotateY(-45deg) skewY(22deg) scaleX(1.26);
}
.white-block {

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

@ -586,12 +586,27 @@ body.page-home #footer {
padding-bottom: 0;
color: #ffffff;
}
#jumbotron .container {
position: relative;
height: 700px;
}
#jumbotron .terraform-canvas {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
-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 .logo-container {
position: absolute;
@ -602,6 +617,27 @@ body.page-home #footer {
bottom: 0;
-webkit-transform: translate3d(0, 0, 0);
}
#jumbotron #image {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-image: url(../images/bg-galaxy.jpg);
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);
}
.animated-logo {
position: absolute;
z-index: 200;
@ -617,7 +653,7 @@ body.page-home #footer {
-webkit-transform: translate3d(0, 0, 0) rotateY(0deg) skewY(0deg) scaleX(1);
}
.state-one.state-two.state-three.state-four .animated-logo {
-webkit-transform: translate3d(0, 0, 0) rotateY(-45deg) skewY(22deg) scaleX(1.26);
-webkit-transform: translate3d(0, 10px, 0) rotateY(-45deg) skewY(22deg) scaleX(1.26);
}
.white-block {
position: absolute;