Skip to content

Commit c511d6e

Browse files
amadeusamadeus
committed
Added galaxy, made tweaks
1 parent c85b68f commit c511d6e

5 files changed

Lines changed: 95 additions & 5 deletions

File tree

‎website/source/images/bg-galaxy.jpg‎

16.1 KB
Loading

‎website/source/index.html.erb‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
<!-- Main jumbotron for a primary marketing message or call to action -->
22
<div id="jumbotron-mask">
33
<div id="jumbotron">
4+
<div class="galaxy-image" id="image"></div>
45
<div class="container">
56
<div class="logo-container">
67
<div class="animated-logo">

‎website/source/javascripts/app/Engine.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -61,11 +61,11 @@ Engine = Base.extend({
6161
this.render();
6262

6363
this.canvas.style.opacity = 1;
64-
/*
64+
6565
image = document.getElementById(bg);
6666
image.style.webkitTransform = 'translate3d(0,0,0) scale(1)';
6767
image.style.opacity = 1;
68-
*/
68+
6969

7070
el = document.body;
7171

@@ -205,7 +205,7 @@ Engine = Base.extend({
205205
}
206206
}
207207

208-
this.generateParticles(600 * this.tick >> 0);
208+
this.generateParticles(200 * this.tick >> 0);
209209
}
210210

211211
});

‎website/source/stylesheets/_jumbotron.less‎

Lines changed: 54 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,12 +16,30 @@
1616
padding-bottom: 0;
1717
color: @jumbotron-color;
1818

19+
.container {
20+
position:relative;
21+
height:700px;
22+
}
23+
1924
.terraform-canvas {
2025
position:absolute;
2126
top:0;
2227
left:0;
2328
width:100%;
2429
height:100%;
30+
opacity:0;
31+
32+
-webkit-transition:opacity 2s ease-out;
33+
-moz-transition:opacity 2s ease-out;
34+
-ms-transition:opacity 2s ease-out;
35+
-o-transition:opacity 2s ease-out;
36+
transition:opacity 2s ease-out;
37+
38+
-webkit-transform:translate3d(0,0,0);
39+
-moz-transform:translate3d(0,0,0);
40+
-ms-transform:translate3d(0,0,0);
41+
-o-transform:translate3d(0,0,0);
42+
transform:translate3d(0,0,0);
2543
}
2644

2745
.logo-container {
@@ -34,6 +52,41 @@
3452

3553
-webkit-transform:translate3d(0,0,0);
3654
}
55+
56+
#image {
57+
position:absolute;
58+
width:100%;
59+
height:100%;
60+
top:0;
61+
left:0;
62+
63+
background-image:url(../images/bg-galaxy.jpg);
64+
background-size:cover;
65+
background-position:50% 50%;
66+
opacity:0;
67+
68+
-webkit-transition:
69+
opacity 6s ease-out,
70+
-webkit-transform 20s ease-out;
71+
-moz-transition:
72+
opacity 6s ease-out,
73+
-moz-transform 20s ease-out;
74+
-ms-transition:
75+
opacity 6s ease-out,
76+
-ms-transform 20s ease-out;
77+
-o-transition:
78+
opacity 6s ease-out,
79+
-o-transform 20s ease-out;
80+
transition:
81+
opacity 6s ease-out,
82+
transform 20s ease-out;
83+
84+
-webkit-transform:translate3d(0,0,0) scale(0.7);
85+
-moz-transform:translate3d(0,0,0) scale(0.7);
86+
-ms-transform:translate3d(0,0,0) scale(0.7);
87+
-o-transform:translate3d(0,0,0) scale(0.7);
88+
transform:translate3d(0,0,0) scale(0.7);
89+
}
3790
}
3891

3992
.animated-logo {
@@ -53,7 +106,7 @@
53106
}
54107

55108
.state-one.state-two.state-three.state-four .animated-logo {
56-
-webkit-transform:translate3d(0,0,0) rotateY(-45deg) skewY(22deg) scaleX(1.26);
109+
-webkit-transform:translate3d(0,10px,0) rotateY(-45deg) skewY(22deg) scaleX(1.26);
57110
}
58111

59112
.white-block {

‎website/source/stylesheets/main.css‎

Lines changed: 37 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -586,12 +586,27 @@ body.page-home #footer {
586586
padding-bottom: 0;
587587
color: #ffffff;
588588
}
589+
#jumbotron .container {
590+
position: relative;
591+
height: 700px;
592+
}
589593
#jumbotron .terraform-canvas {
590594
position: absolute;
591595
top: 0;
592596
left: 0;
593597
width: 100%;
594598
height: 100%;
599+
opacity: 0;
600+
-webkit-transition: opacity 2s ease-out;
601+
-moz-transition: opacity 2s ease-out;
602+
-ms-transition: opacity 2s ease-out;
603+
-o-transition: opacity 2s ease-out;
604+
transition: opacity 2s ease-out;
605+
-webkit-transform: translate3d(0, 0, 0);
606+
-moz-transform: translate3d(0, 0, 0);
607+
-ms-transform: translate3d(0, 0, 0);
608+
-o-transform: translate3d(0, 0, 0);
609+
transform: translate3d(0, 0, 0);
595610
}
596611
#jumbotron .logo-container {
597612
position: absolute;
@@ -602,6 +617,27 @@ body.page-home #footer {
602617
bottom: 0;
603618
-webkit-transform: translate3d(0, 0, 0);
604619
}
620+
#jumbotron #image {
621+
position: absolute;
622+
width: 100%;
623+
height: 100%;
624+
top: 0;
625+
left: 0;
626+
background-image: url(../images/bg-galaxy.jpg);
627+
background-size: cover;
628+
background-position: 50% 50%;
629+
opacity: 0;
630+
-webkit-transition: opacity 6s ease-out, -webkit-transform 20s ease-out;
631+
-moz-transition: opacity 6s ease-out, -moz-transform 20s ease-out;
632+
-ms-transition: opacity 6s ease-out, -ms-transform 20s ease-out;
633+
-o-transition: opacity 6s ease-out, -o-transform 20s ease-out;
634+
transition: opacity 6s ease-out, transform 20s ease-out;
635+
-webkit-transform: translate3d(0, 0, 0) scale(0.7);
636+
-moz-transform: translate3d(0, 0, 0) scale(0.7);
637+
-ms-transform: translate3d(0, 0, 0) scale(0.7);
638+
-o-transform: translate3d(0, 0, 0) scale(0.7);
639+
transform: translate3d(0, 0, 0) scale(0.7);
640+
}
605641
.animated-logo {
606642
position: absolute;
607643
z-index: 200;
@@ -617,7 +653,7 @@ body.page-home #footer {
617653
-webkit-transform: translate3d(0, 0, 0) rotateY(0deg) skewY(0deg) scaleX(1);
618654
}
619655
.state-one.state-two.state-three.state-four .animated-logo {
620-
-webkit-transform: translate3d(0, 0, 0) rotateY(-45deg) skewY(22deg) scaleX(1.26);
656+
-webkit-transform: translate3d(0, 10px, 0) rotateY(-45deg) skewY(22deg) scaleX(1.26);
621657
}
622658
.white-block {
623659
position: absolute;

0 commit comments

Comments
 (0)