Added galaxy, made tweaks
This commit is contained in:
parent
c85b68f978
commit
c511d6e543
Binary file not shown.
After Width: | Height: | Size: 16 KiB |
|
@ -1,6 +1,7 @@
|
||||||
<!-- Main jumbotron for a primary marketing message or call to action -->
|
<!-- Main jumbotron for a primary marketing message or call to action -->
|
||||||
<div id="jumbotron-mask">
|
<div id="jumbotron-mask">
|
||||||
<div id="jumbotron">
|
<div id="jumbotron">
|
||||||
|
<div class="galaxy-image" id="image"></div>
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="logo-container">
|
<div class="logo-container">
|
||||||
<div class="animated-logo">
|
<div class="animated-logo">
|
||||||
|
|
|
@ -61,11 +61,11 @@ Engine = Base.extend({
|
||||||
this.render();
|
this.render();
|
||||||
|
|
||||||
this.canvas.style.opacity = 1;
|
this.canvas.style.opacity = 1;
|
||||||
/*
|
|
||||||
image = document.getElementById(bg);
|
image = document.getElementById(bg);
|
||||||
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;
|
el = document.body;
|
||||||
|
|
||||||
|
@ -205,7 +205,7 @@ Engine = Base.extend({
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
this.generateParticles(600 * this.tick >> 0);
|
this.generateParticles(200 * this.tick >> 0);
|
||||||
}
|
}
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
|
@ -16,12 +16,30 @@
|
||||||
padding-bottom: 0;
|
padding-bottom: 0;
|
||||||
color: @jumbotron-color;
|
color: @jumbotron-color;
|
||||||
|
|
||||||
|
.container {
|
||||||
|
position:relative;
|
||||||
|
height:700px;
|
||||||
|
}
|
||||||
|
|
||||||
.terraform-canvas {
|
.terraform-canvas {
|
||||||
position:absolute;
|
position:absolute;
|
||||||
top:0;
|
top:0;
|
||||||
left:0;
|
left:0;
|
||||||
width:100%;
|
width:100%;
|
||||||
height: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 {
|
.logo-container {
|
||||||
|
@ -34,6 +52,41 @@
|
||||||
|
|
||||||
-webkit-transform:translate3d(0,0,0);
|
-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 {
|
.animated-logo {
|
||||||
|
@ -53,7 +106,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.state-one.state-two.state-three.state-four .animated-logo {
|
.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 {
|
.white-block {
|
||||||
|
|
|
@ -586,12 +586,27 @@ body.page-home #footer {
|
||||||
padding-bottom: 0;
|
padding-bottom: 0;
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
}
|
}
|
||||||
|
#jumbotron .container {
|
||||||
|
position: relative;
|
||||||
|
height: 700px;
|
||||||
|
}
|
||||||
#jumbotron .terraform-canvas {
|
#jumbotron .terraform-canvas {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 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 {
|
#jumbotron .logo-container {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
@ -602,6 +617,27 @@ body.page-home #footer {
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
-webkit-transform: translate3d(0, 0, 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 {
|
.animated-logo {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
z-index: 200;
|
z-index: 200;
|
||||||
|
@ -617,7 +653,7 @@ body.page-home #footer {
|
||||||
-webkit-transform: translate3d(0, 0, 0) rotateY(0deg) skewY(0deg) scaleX(1);
|
-webkit-transform: translate3d(0, 0, 0) rotateY(0deg) skewY(0deg) scaleX(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, 0, 0) rotateY(-45deg) skewY(22deg) scaleX(1.26);
|
-webkit-transform: translate3d(0, 10px, 0) rotateY(-45deg) skewY(22deg) scaleX(1.26);
|
||||||
}
|
}
|
||||||
.white-block {
|
.white-block {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
Loading…
Reference in New Issue