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

More tweaks and stuff 

Improved CSS and HTML a bit in the jumbotron.
This commit is contained in:
Amadeus Demarzi 2014-07-26 01:00:59 -07:00
parent 172552d48a
commit 3f54a5fa18
5 changed files with 287 additions and 137 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,14 +1,9 @@
<!-- 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="galaxy-image" id="galaxy-bg"></div>
<div class="logo-container"> <div class="jumbotron-content" id="jumbotron-content">
<div class="animated-logo"> <h2 class="tag-line" id="tag-line">Build, Combine and Launch Infrastucture</h2>
<div class="white-block block-one"></div>
<div class="white-block block-two"></div>
<div class="white-block block-three"></div>
<div class="white-block block-four"></div>
</div>
</div> </div>
</div> </div>
</div> </div>

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

@ -44,19 +44,28 @@ Engine = Base.extend({
y: -9999 y: -9999
}, },
constructor: function(canvas, image){ constructor: function(canvas, background, tagLine){
if (typeof canvas === 'string') {
this.canvas = document.getElementById(canvas);
} else {
this.canvas = canvas; this.canvas = canvas;
} this.background = background;
this.tagLine = tagLine;
if (!this.canvas.getContext) { if (!this.canvas.getContext) {
return; return null;
} }
this.context = this.canvas.getContext('2d'); this.context = this.canvas.getContext('2d');
this.setupEvents();
this.setupStarfield();
this.setupTessellation();
this.last = Date.now() / 1000;
this.render = this.render.bind(this);
this.start();
},
setupEvents: function(){
this.resize = this.resize.bind(this); this.resize = this.resize.bind(this);
this.resize(); this.resize();
window.addEventListener('resize', this.resize, false); window.addEventListener('resize', this.resize, false);
@ -65,31 +74,22 @@ Engine = Base.extend({
this._handleScroll(); this._handleScroll();
window.addEventListener('scroll', this._handleScroll, false); window.addEventListener('scroll', this._handleScroll, false);
this.setupStarfield();
this.setupTessellation();
this.last = Date.now() / 1000;
this.start = this.last;
this._handleMouseCoords = this._handleMouseCoords.bind(this); this._handleMouseCoords = this._handleMouseCoords.bind(this);
window.addEventListener('mousemove', this._handleMouseCoords, false); window.addEventListener('mousemove', this._handleMouseCoords, false);
this.render = this.render.bind(this);
this.render();
this.canvas.style.opacity = 1;
this.cssAnimations(
document.getElementById(image)
);
}, },
cssAnimations: function(image){ start: function(){
var parent = this.canvas.parentNode; var parent = this.canvas.parentNode;
image.style.webkitTransform = 'translate3d(0,0,0) scale(1)'; this.background.style.opacity = 1;
image.style.opacity = 1;
this.background.style.webkitTransform = 'translate3d(0,0,0) scale(1)';
this.background.style.mozTransform = 'translate3d(0,0,0) scale(1)';
this.background.style.msTransform = 'translate3d(0,0,0) scale(1)';
this.background.style.oTransform = 'translate3d(0,0,0) scale(1)';
this.background.style.transform = 'translate3d(0,0,0) scale(1)';
this.canvas.style.opacity = 1;
new Chainable() new Chainable()
.wait(1000) .wait(1000)
@ -123,6 +123,8 @@ Engine = Base.extend({
.wait(1000) .wait(1000)
.then(function(){ .then(function(){
}, this); }, this);
this.render();
}, },
setupStarfield: function(){ setupStarfield: function(){
@ -135,7 +137,7 @@ Engine = Base.extend({
this.shapes = []; this.shapes = [];
this.logo = new Engine.Shape( this.logo = new Engine.Shape(
-(180), -(180),
-(180), -(220),
360, 360,
360, 360,
Logo.Points, Logo.Points,

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

@ -12,20 +12,42 @@ var Init = {
} }
}, },
generateAnimatedLogo: function(){
var container, x, block;
container = document.createElement('div');
container.className = 'animated-logo';
for (x = 1; x < 5; x++) {
block = document.createElement('div');
block.className = 'white-block block-' + x;
container.appendChild(block);
}
return container;
},
Pages: { Pages: {
'page-home': function(){ 'page-home': function(){
var jumbotron = document.getElementById('jumbotron'), var jumbotron = document.getElementById('jumbotron'),
content = document.getElementById('jumbotron-content'),
galaxy = document.getElementById('galaxy-bg'),
tagLine = document.getElementById('tag-line'),
canvas; canvas;
if (!jumbotron) { if (!jumbotron) {
return; return;
} }
content.appendChild(
Init.generateAnimatedLogo()
);
canvas = document.createElement('canvas'); canvas = document.createElement('canvas');
canvas.className = 'terraform-canvas'; canvas.className = 'terraform-canvas';
jumbotron.appendChild(canvas); jumbotron.appendChild(canvas);
window.engine = new Engine(canvas, 'image'); window.engine = new Engine(canvas, galaxy, tagLine);
} }
} }

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

@ -22,7 +22,6 @@
left:0; left:0;
width:100%; width:100%;
height:100%; height:100%;
/* background-color:#000; */
opacity:0; opacity:0;
-webkit-transition:opacity 2s ease-out; -webkit-transition:opacity 2s ease-out;
@ -38,7 +37,7 @@
transform:translate3d(0,0,0); transform:translate3d(0,0,0);
} }
.logo-container { .jumbotron-content {
position:absolute; position:absolute;
z-index:999; z-index:999;
top:0; top:0;
@ -47,9 +46,13 @@
bottom:0; bottom:0;
-webkit-transform:translate3d(0,0,0); -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);
} }
#image { .galaxy-image {
position:absolute; position:absolute;
width:100%; width:100%;
height:100%; height:100%;
@ -85,6 +88,22 @@
} }
} }
.tag-line {
position:absolute;
width:100%;
top:540px;
color:#fff;
text-align:center;
font-family:"Courier New", Monaco, Menlo, Consolas, monospace;
-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);
}
.animated-logo { .animated-logo {
position:absolute; position:absolute;
z-index:200; z-index:200;
@ -92,23 +111,54 @@
left:50%; left:50%;
width:140px; width:140px;
height:140px; height:140px;
margin:-28px 0 0 -115px; margin:-60px 0 0 -115px;
opacity:1; opacity:1;
-webkit-transition:-webkit-transform 300ms ease-in-out; -webkit-transition:-webkit-transform 300ms ease-in-out;
-moz-transition: -moz-transform 300ms ease-in-out;
-ms-transition: -ms-transform 300ms ease-in-out;
-o-transition: -o-transform 300ms ease-in-out;
transition: transform 300ms ease-in-out;
-webkit-transform-origin:50% 50%; -webkit-transform-origin:50% 50%;
-moz-transform-origin:50% 50%;
-ms-transform-origin:50% 50%;
-o-transform-origin:50% 50%;
transform-origin:50% 50%;
-webkit-transform-style:preserve-3d; -webkit-transform-style:preserve-3d;
-moz-transform-style:preserve-3d;
-ms-transform-style:preserve-3d;
-o-transform-style:preserve-3d;
transform-style:preserve-3d;
-webkit-transform:translate3d(0,0,0) rotateY(0deg) skewY(0deg) scale(1,1); -webkit-transform:translate3d(0,0,0) rotateY(0deg) skewY(0deg) scale(1,1);
-moz-transform:translate3d(0,0,0) rotateY(0deg) skewY(0deg) scale(1,1);
-ms-transform:translate3d(0,0,0) rotateY(0deg) skewY(0deg) scale(1,1);
-o-transform:translate3d(0,0,0) rotateY(0deg) skewY(0deg) scale(1,1);
transform:translate3d(0,0,0) rotateY(0deg) skewY(0deg) scale(1,1);
} }
.state-one .animated-logo { .state-one .animated-logo {
-webkit-transform:translate3d(0,0,0) rotateY(0deg) skewY(0deg) scale(1,1); -webkit-transform:translate3d(0,0,0) rotateY(0deg) skewY(0deg) scale(1,1);
-moz-transform:translate3d(0,0,0) rotateY(0deg) skewY(0deg) scale(1,1);
-ms-transform:translate3d(0,0,0) rotateY(0deg) skewY(0deg) scale(1,1);
-o-transform:translate3d(0,0,0) rotateY(0deg) skewY(0deg) scale(1,1);
transform:translate3d(0,0,0) rotateY(0deg) skewY(0deg) scale(1,1);
} }
.state-one.state-two.state-three.state-four .animated-logo { .state-one.state-two.state-three.state-four .animated-logo {
-webkit-transform-origin:100% 0; -webkit-transform-origin:100% 0;
-moz-transform-origin:100% 0;
-ms-transform-origin:100% 0;
-o-transform-origin:100% 0;
transform-origin:100% 0;
-webkit-transform:translate3d(0,10px,0) rotateY(-45deg) skewY(22deg) scale(1.26,1); -webkit-transform:translate3d(0,10px,0) rotateY(-45deg) skewY(22deg) scale(1.26,1);
-moz-transform:translate3d(0,10px,0) rotateY(-45deg) skewY(22deg) scale(1.26,1);
-ms-transform:translate3d(0,10px,0) rotateY(-45deg) skewY(22deg) scale(1.26,1);
-o-transform:translate3d(0,10px,0) rotateY(-45deg) skewY(22deg) scale(1.26,1);
transform:translate3d(0,10px,0) rotateY(-45deg) skewY(22deg) scale(1.26,1);
} }
.state-one.state-two.state-three.state-four .white-block { .state-one.state-two.state-three.state-four .white-block {
@ -134,93 +184,117 @@
opacity 300ms ease-out, opacity 300ms ease-out,
-webkit-transform 300ms ease-out, -webkit-transform 300ms ease-out,
background-color 300ms ease-out; background-color 300ms ease-out;
-moz-transition:
opacity 300ms ease-out,
-moz-transform 300ms ease-out,
background-color 300ms ease-out;
-ms-transition:
opacity 300ms ease-out,
-ms-transform 300ms ease-out,
background-color 300ms ease-out;
-o-transition:
opacity 300ms ease-out,
-o-transform 300ms ease-out,
background-color 300ms ease-out;
transition:
opacity 300ms ease-out,
transform 300ms ease-out,
background-color 300ms ease-out;
} }
.block-one, .block-1,
.block-two, .block-2,
.block-three, .block-3,
.block-four { .block-4 {
top:0; top:0;
left:72px; left:72px;
-webkit-transform-origin:50% 50%; -webkit-transform-origin:50% 50%;
-moz-transform-origin:50% 50%;
-ms-transform-origin:50% 50%;
-o-transform-origin:50% 50%;
transform-origin:50% 50%;
-webkit-transform:translate3d(0,0,0); -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);
} }
.block-one { .block-1 {
opacity:0; opacity:0;
-webkit-transform:translate3d(0,0,0) scale(0,0); -webkit-transform:translate3d(0,0,0) scale(0,0);
-moz-transform:translate3d(0,0,0) scale(0,0);
-ms-transform:translate3d(0,0,0) scale(0,0);
-o-transform:translate3d(0,0,0) scale(0,0);
transform:translate3d(0,0,0) scale(0,0);
} }
.block-two { .block-2 {
opacity:0; opacity:0;
top:0; top:0;
left:0; left:0;
-webkit-transform:translate3d(0,0,0) scale(0,0); -webkit-transform:translate3d(0,0,0) scale(0,0);
-moz-transform:translate3d(0,0,0) scale(0,0);
-ms-transform:translate3d(0,0,0) scale(0,0);
-o-transform:translate3d(0,0,0) scale(0,0);
transform:translate3d(0,0,0) scale(0,0);
} }
.block-three { .block-3 {
opacity:0; opacity:0;
top:72px; top:72px;
/* -webkit-transform:translate3d(0,-100px,0) scaleY(1); */
-webkit-transform:translate3d(0,0,0) scale(0,0); -webkit-transform:translate3d(0,0,0) scale(0,0);
-moz-transform:translate3d(0,0,0) scale(0,0);
-ms-transform:translate3d(0,0,0) scale(0,0);
-o-transform:translate3d(0,0,0) scale(0,0);
transform:translate3d(0,0,0) scale(0,0);
} }
.block-four { .block-4 {
-webkit-transform-origin:0 0; -webkit-transform-origin:0 0;
-moz-transform-origin:0 0;
-ms-transform-origin:0 0;
-o-transform-origin:0 0;
transform-origin:0 0;
-webkit-transform:translate3d(72px,-2px,0) rotateY(90deg) skewY(-22deg) scaleX(1.25); -webkit-transform:translate3d(72px,-2px,0) rotateY(90deg) skewY(-22deg) scaleX(1.25);
-moz-transform:translate3d(72px,-2px,0) rotateY(90deg) skewY(-22deg) scaleX(1.25);
-ms-transform:translate3d(72px,-2px,0) rotateY(90deg) skewY(-22deg) scaleX(1.25);
-o-transform:translate3d(72px,-2px,0) rotateY(90deg) skewY(-22deg) scaleX(1.25);
transform:translate3d(72px,-2px,0) rotateY(90deg) skewY(-22deg) scaleX(1.25);
} }
.state-one.state-two .block-one { .state-one.state-two .block-1 {
opacity:1; opacity:1;
-webkit-transform:translate3d(0,0,0) scale(1,1); -webkit-transform:translate3d(0,0,0) scale(1,1);
/* -webkit-animation:PopIn 300ms 1 ease-in; */ -moz-transform:translate3d(0,0,0) scale(1,1);
/* animation:PopIn 300ms 1 ease-in; */ -ms-transform:translate3d(0,0,0) scale(1,1);
-o-transform:translate3d(0,0,0) scale(1,1);
transform:translate3d(0,0,0) scale(1,1);
} }
.state-one .block-two { .state-one .block-2 {
opacity:1; opacity:1;
-webkit-transform:translate3d(0,0,0) scale(1,1); -webkit-transform:translate3d(0,0,0) scale(1,1);
/* -webkit-animation:PopIn 300ms 1 ease-in; */ -moz-transform:translate3d(0,0,0) scale(1,1);
/* animation:PopIn 300ms 1 ease-in; */ -ms-transform:translate3d(0,0,0) scale(1,1);
-o-transform:translate3d(0,0,0) scale(1,1);
transform:translate3d(0,0,0) scale(1,1);
} }
.state-one.state-two.state-three .block-three { .state-one.state-two.state-three .block-3 {
opacity:1; opacity:1;
-webkit-transform:translate3d(0,0,0) scale(1,1); -webkit-transform:translate3d(0,0,0) scale(1,1);
/* -webkit-animation:PopIn 300ms 1 ease-in; */ -moz-transform:translate3d(0,0,0) scale(1,1);
/* animation:PopIn 300ms 1 ease-in; */ -ms-transform:translate3d(0,0,0) scale(1,1);
} -o-transform:translate3d(0,0,0) scale(1,1);
transform:translate3d(0,0,0) scale(1,1);
@-webkit-keyframes PopIn {
0% {
opacity:0;
-webkit-transform:translate3d(0,0,0) scale(0);
-webkit-animation-timing-function:ease-out;
animation-timing-function:ease-out;
}
40% {
opacity: 1;
-webkit-transform:translate3d(0,0,0) scale(1.2);
-webkit-animation-timing-function:ease-out;
animation-timing-function:ease-out;
}
70% {
opacity: 1;
-webkit-transform:translate3d(0,0,0) scale(0.90);
-webkit-animation-timing-function:ease-out;
animation-timing-function:ease-out;
}
100% {
opacity: 1;
-webkit-transform:translate3d(0,0,0) scale(1);
}
} }

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

@ -603,7 +603,6 @@ body.page-home #footer {
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
/* background-color:#000; */
opacity: 0; opacity: 0;
-webkit-transition: opacity 2s ease-out; -webkit-transition: opacity 2s ease-out;
-moz-transition: opacity 2s ease-out; -moz-transition: opacity 2s ease-out;
@ -616,7 +615,7 @@ body.page-home #footer {
-o-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);
} }
#jumbotron .logo-container { #jumbotron .jumbotron-content {
position: absolute; position: absolute;
z-index: 999; z-index: 999;
top: 0; top: 0;
@ -624,8 +623,12 @@ body.page-home #footer {
right: 0; right: 0;
bottom: 0; bottom: 0;
-webkit-transform: translate3d(0, 0, 0); -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 #image { #jumbotron .galaxy-image {
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -646,6 +649,19 @@ body.page-home #footer {
-o-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); transform: translate3d(0, 0, 0) scale(0.7);
} }
.tag-line {
position: absolute;
width: 100%;
top: 540px;
color: #fff;
text-align: center;
font-family: "Courier New", Monaco, Menlo, Consolas, monospace;
-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);
}
.animated-logo { .animated-logo {
position: absolute; position: absolute;
z-index: 200; z-index: 200;
@ -653,19 +669,47 @@ body.page-home #footer {
left: 50%; left: 50%;
width: 140px; width: 140px;
height: 140px; height: 140px;
margin: -28px 0 0 -115px; margin: -60px 0 0 -115px;
opacity: 1; opacity: 1;
-webkit-transition: -webkit-transform 300ms ease-in-out; -webkit-transition: -webkit-transform 300ms ease-in-out;
-moz-transition: -moz-transform 300ms ease-in-out;
-ms-transition: -ms-transform 300ms ease-in-out;
-o-transition: -o-transform 300ms ease-in-out;
transition: transform 300ms ease-in-out;
-webkit-transform-origin: 50% 50%; -webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-transform-style: preserve-3d; -webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: translate3d(0, 0, 0) rotateY(0deg) skewY(0deg) scale(1, 1); -webkit-transform: translate3d(0, 0, 0) rotateY(0deg) skewY(0deg) scale(1, 1);
-moz-transform: translate3d(0, 0, 0) rotateY(0deg) skewY(0deg) scale(1, 1);
-ms-transform: translate3d(0, 0, 0) rotateY(0deg) skewY(0deg) scale(1, 1);
-o-transform: translate3d(0, 0, 0) rotateY(0deg) skewY(0deg) scale(1, 1);
transform: translate3d(0, 0, 0) rotateY(0deg) skewY(0deg) scale(1, 1);
} }
.state-one .animated-logo { .state-one .animated-logo {
-webkit-transform: translate3d(0, 0, 0) rotateY(0deg) skewY(0deg) scale(1, 1); -webkit-transform: translate3d(0, 0, 0) rotateY(0deg) skewY(0deg) scale(1, 1);
-moz-transform: translate3d(0, 0, 0) rotateY(0deg) skewY(0deg) scale(1, 1);
-ms-transform: translate3d(0, 0, 0) rotateY(0deg) skewY(0deg) scale(1, 1);
-o-transform: translate3d(0, 0, 0) rotateY(0deg) skewY(0deg) scale(1, 1);
transform: translate3d(0, 0, 0) rotateY(0deg) skewY(0deg) scale(1, 1);
} }
.state-one.state-two.state-three.state-four .animated-logo { .state-one.state-two.state-three.state-four .animated-logo {
-webkit-transform-origin: 100% 0; -webkit-transform-origin: 100% 0;
-moz-transform-origin: 100% 0;
-ms-transform-origin: 100% 0;
-o-transform-origin: 100% 0;
transform-origin: 100% 0;
-webkit-transform: translate3d(0, 10px, 0) rotateY(-45deg) skewY(22deg) scale(1.26, 1); -webkit-transform: translate3d(0, 10px, 0) rotateY(-45deg) skewY(22deg) scale(1.26, 1);
-moz-transform: translate3d(0, 10px, 0) rotateY(-45deg) skewY(22deg) scale(1.26, 1);
-ms-transform: translate3d(0, 10px, 0) rotateY(-45deg) skewY(22deg) scale(1.26, 1);
-o-transform: translate3d(0, 10px, 0) rotateY(-45deg) skewY(22deg) scale(1.26, 1);
transform: translate3d(0, 10px, 0) rotateY(-45deg) skewY(22deg) scale(1.26, 1);
} }
.state-one.state-two.state-three.state-four .white-block { .state-one.state-two.state-three.state-four .white-block {
background-color: #ffffff; background-color: #ffffff;
@ -682,77 +726,90 @@ body.page-home #footer {
background-color: rgba(255, 255, 255, 0); background-color: rgba(255, 255, 255, 0);
border: 1px solid #fff; border: 1px solid #fff;
-webkit-transition: opacity 300ms ease-out, -webkit-transform 300ms ease-out, background-color 300ms ease-out; -webkit-transition: opacity 300ms ease-out, -webkit-transform 300ms ease-out, background-color 300ms ease-out;
-moz-transition: opacity 300ms ease-out, -moz-transform 300ms ease-out, background-color 300ms ease-out;
-ms-transition: opacity 300ms ease-out, -ms-transform 300ms ease-out, background-color 300ms ease-out;
-o-transition: opacity 300ms ease-out, -o-transform 300ms ease-out, background-color 300ms ease-out;
transition: opacity 300ms ease-out, transform 300ms ease-out, background-color 300ms ease-out;
} }
.block-one, .block-1,
.block-two, .block-2,
.block-three, .block-3,
.block-four { .block-4 {
top: 0; top: 0;
left: 72px; left: 72px;
-webkit-transform-origin: 50% 50%; -webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-transform: translate3d(0, 0, 0); -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);
} }
.block-one { .block-1 {
opacity: 0; opacity: 0;
-webkit-transform: translate3d(0, 0, 0) scale(0, 0); -webkit-transform: translate3d(0, 0, 0) scale(0, 0);
-moz-transform: translate3d(0, 0, 0) scale(0, 0);
-ms-transform: translate3d(0, 0, 0) scale(0, 0);
-o-transform: translate3d(0, 0, 0) scale(0, 0);
transform: translate3d(0, 0, 0) scale(0, 0);
} }
.block-two { .block-2 {
opacity: 0; opacity: 0;
top: 0; top: 0;
left: 0; left: 0;
-webkit-transform: translate3d(0, 0, 0) scale(0, 0); -webkit-transform: translate3d(0, 0, 0) scale(0, 0);
-moz-transform: translate3d(0, 0, 0) scale(0, 0);
-ms-transform: translate3d(0, 0, 0) scale(0, 0);
-o-transform: translate3d(0, 0, 0) scale(0, 0);
transform: translate3d(0, 0, 0) scale(0, 0);
} }
.block-three { .block-3 {
opacity: 0; opacity: 0;
top: 72px; top: 72px;
/* -webkit-transform:translate3d(0,-100px,0) scaleY(1); */
-webkit-transform: translate3d(0, 0, 0) scale(0, 0); -webkit-transform: translate3d(0, 0, 0) scale(0, 0);
-moz-transform: translate3d(0, 0, 0) scale(0, 0);
-ms-transform: translate3d(0, 0, 0) scale(0, 0);
-o-transform: translate3d(0, 0, 0) scale(0, 0);
transform: translate3d(0, 0, 0) scale(0, 0);
} }
.block-four { .block-4 {
-webkit-transform-origin: 0 0; -webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-ms-transform-origin: 0 0;
-o-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: translate3d(72px, -2px, 0) rotateY(90deg) skewY(-22deg) scaleX(1.25); -webkit-transform: translate3d(72px, -2px, 0) rotateY(90deg) skewY(-22deg) scaleX(1.25);
-moz-transform: translate3d(72px, -2px, 0) rotateY(90deg) skewY(-22deg) scaleX(1.25);
-ms-transform: translate3d(72px, -2px, 0) rotateY(90deg) skewY(-22deg) scaleX(1.25);
-o-transform: translate3d(72px, -2px, 0) rotateY(90deg) skewY(-22deg) scaleX(1.25);
transform: translate3d(72px, -2px, 0) rotateY(90deg) skewY(-22deg) scaleX(1.25);
} }
.state-one.state-two .block-one { .state-one.state-two .block-1 {
opacity: 1; opacity: 1;
-webkit-transform: translate3d(0, 0, 0) scale(1, 1); -webkit-transform: translate3d(0, 0, 0) scale(1, 1);
/* -webkit-animation:PopIn 300ms 1 ease-in; */ -moz-transform: translate3d(0, 0, 0) scale(1, 1);
/* animation:PopIn 300ms 1 ease-in; */ -ms-transform: translate3d(0, 0, 0) scale(1, 1);
-o-transform: translate3d(0, 0, 0) scale(1, 1);
transform: translate3d(0, 0, 0) scale(1, 1);
} }
.state-one .block-two { .state-one .block-2 {
opacity: 1; opacity: 1;
-webkit-transform: translate3d(0, 0, 0) scale(1, 1); -webkit-transform: translate3d(0, 0, 0) scale(1, 1);
/* -webkit-animation:PopIn 300ms 1 ease-in; */ -moz-transform: translate3d(0, 0, 0) scale(1, 1);
/* animation:PopIn 300ms 1 ease-in; */ -ms-transform: translate3d(0, 0, 0) scale(1, 1);
-o-transform: translate3d(0, 0, 0) scale(1, 1);
transform: translate3d(0, 0, 0) scale(1, 1);
} }
.state-one.state-two.state-three .block-three { .state-one.state-two.state-three .block-3 {
opacity: 1; opacity: 1;
-webkit-transform: translate3d(0, 0, 0) scale(1, 1); -webkit-transform: translate3d(0, 0, 0) scale(1, 1);
/* -webkit-animation:PopIn 300ms 1 ease-in; */ -moz-transform: translate3d(0, 0, 0) scale(1, 1);
/* animation:PopIn 300ms 1 ease-in; */ -ms-transform: translate3d(0, 0, 0) scale(1, 1);
} -o-transform: translate3d(0, 0, 0) scale(1, 1);
@-webkit-keyframes PopIn { transform: translate3d(0, 0, 0) scale(1, 1);
0% {
opacity: 0;
-webkit-transform: translate3d(0, 0, 0) scale(0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
40% {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0) scale(1.2);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
70% {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0) scale(0.9);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
100% {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0) scale(1);
}
} }
.outline-btn { .outline-btn {
background-color: transparent; background-color: transparent;