More tweaks and stuff
Improved CSS and HTML a bit in the jumbotron.
This commit is contained in:
Amadeus Demarzi
parent
172552d48a
commit
3f54a5fa18
|
|
@ -1,14 +1,9 @@
|
|||
<!-- 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="logo-container">
|
||||
<div class="animated-logo">
|
||||
<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 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>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -44,19 +44,28 @@ Engine = Base.extend({
|
|||
y: -9999
|
||||
},
|
||||
|
||||
constructor: function(canvas, image){
|
||||
if (typeof canvas === 'string') {
|
||||
this.canvas = document.getElementById(canvas);
|
||||
} else {
|
||||
this.canvas = canvas;
|
||||
}
|
||||
constructor: function(canvas, background, tagLine){
|
||||
this.canvas = canvas;
|
||||
this.background = background;
|
||||
this.tagLine = tagLine;
|
||||
|
||||
if (!this.canvas.getContext) {
|
||||
return;
|
||||
return null;
|
||||
}
|
||||
|
||||
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();
|
||||
window.addEventListener('resize', this.resize, false);
|
||||
|
|
@ -65,31 +74,22 @@ Engine = Base.extend({
|
|||
this._handleScroll();
|
||||
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);
|
||||
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;
|
||||
|
||||
image.style.webkitTransform = 'translate3d(0,0,0) scale(1)';
|
||||
image.style.opacity = 1;
|
||||
this.background.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()
|
||||
.wait(1000)
|
||||
|
|
@ -123,6 +123,8 @@ Engine = Base.extend({
|
|||
.wait(1000)
|
||||
.then(function(){
|
||||
}, this);
|
||||
|
||||
this.render();
|
||||
},
|
||||
|
||||
setupStarfield: function(){
|
||||
|
|
@ -135,7 +137,7 @@ Engine = Base.extend({
|
|||
this.shapes = [];
|
||||
this.logo = new Engine.Shape(
|
||||
-(180),
|
||||
-(180),
|
||||
-(220),
|
||||
360,
|
||||
360,
|
||||
Logo.Points,
|
||||
|
|
|
|||
|
|
@ -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: {
|
||||
'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) {
|
||||
return;
|
||||
}
|
||||
|
||||
content.appendChild(
|
||||
Init.generateAnimatedLogo()
|
||||
);
|
||||
|
||||
canvas = document.createElement('canvas');
|
||||
canvas.className = 'terraform-canvas';
|
||||
|
||||
jumbotron.appendChild(canvas);
|
||||
window.engine = new Engine(canvas, 'image');
|
||||
window.engine = new Engine(canvas, galaxy, tagLine);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -22,7 +22,6 @@
|
|||
left:0;
|
||||
width:100%;
|
||||
height:100%;
|
||||
/* background-color:#000; */
|
||||
opacity:0;
|
||||
|
||||
-webkit-transition:opacity 2s ease-out;
|
||||
|
|
@ -38,7 +37,7 @@
|
|||
transform:translate3d(0,0,0);
|
||||
}
|
||||
|
||||
.logo-container {
|
||||
.jumbotron-content {
|
||||
position:absolute;
|
||||
z-index:999;
|
||||
top:0;
|
||||
|
|
@ -47,9 +46,13 @@
|
|||
bottom: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;
|
||||
width: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 {
|
||||
position:absolute;
|
||||
z-index:200;
|
||||
|
|
@ -92,23 +111,54 @@
|
|||
left:50%;
|
||||
width:140px;
|
||||
height:140px;
|
||||
margin:-28px 0 0 -115px;
|
||||
margin:-60px 0 0 -115px;
|
||||
opacity:1;
|
||||
|
||||
-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%;
|
||||
-moz-transform-origin:50% 50%;
|
||||
-ms-transform-origin:50% 50%;
|
||||
-o-transform-origin:50% 50%;
|
||||
transform-origin:50% 50%;
|
||||
|
||||
-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);
|
||||
-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 {
|
||||
-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 {
|
||||
-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);
|
||||
-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 {
|
||||
|
|
@ -134,93 +184,117 @@
|
|||
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-two,
|
||||
.block-three,
|
||||
.block-four {
|
||||
.block-1,
|
||||
.block-2,
|
||||
.block-3,
|
||||
.block-4 {
|
||||
top:0;
|
||||
left:72px;
|
||||
|
||||
-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);
|
||||
-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;
|
||||
|
||||
-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;
|
||||
top:0;
|
||||
left: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;
|
||||
top:72px;
|
||||
/* -webkit-transform:translate3d(0,-100px,0) scaleY(1); */
|
||||
|
||||
-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;
|
||||
-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);
|
||||
-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;
|
||||
|
||||
-webkit-transform:translate3d(0,0,0) scale(1,1);
|
||||
/* -webkit-animation:PopIn 300ms 1 ease-in; */
|
||||
/* animation:PopIn 300ms 1 ease-in; */
|
||||
-moz-transform:translate3d(0,0,0) scale(1,1);
|
||||
-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;
|
||||
|
||||
-webkit-transform:translate3d(0,0,0) scale(1,1);
|
||||
/* -webkit-animation:PopIn 300ms 1 ease-in; */
|
||||
/* animation:PopIn 300ms 1 ease-in; */
|
||||
-moz-transform:translate3d(0,0,0) scale(1,1);
|
||||
-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;
|
||||
|
||||
-webkit-transform:translate3d(0,0,0) scale(1,1);
|
||||
/* -webkit-animation:PopIn 300ms 1 ease-in; */
|
||||
/* animation:PopIn 300ms 1 ease-in; */
|
||||
}
|
||||
|
||||
@-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);
|
||||
}
|
||||
-moz-transform:translate3d(0,0,0) scale(1,1);
|
||||
-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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -603,7 +603,6 @@ body.page-home #footer {
|
|||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
/* background-color:#000; */
|
||||
opacity: 0;
|
||||
-webkit-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);
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
#jumbotron .logo-container {
|
||||
#jumbotron .jumbotron-content {
|
||||
position: absolute;
|
||||
z-index: 999;
|
||||
top: 0;
|
||||
|
|
@ -624,8 +623,12 @@ body.page-home #footer {
|
|||
right: 0;
|
||||
bottom: 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;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
|
@ -646,6 +649,19 @@ body.page-home #footer {
|
|||
-o-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 {
|
||||
position: absolute;
|
||||
z-index: 200;
|
||||
|
|
@ -653,19 +669,47 @@ body.page-home #footer {
|
|||
left: 50%;
|
||||
width: 140px;
|
||||
height: 140px;
|
||||
margin: -28px 0 0 -115px;
|
||||
margin: -60px 0 0 -115px;
|
||||
opacity: 1;
|
||||
-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%;
|
||||
-moz-transform-origin: 50% 50%;
|
||||
-ms-transform-origin: 50% 50%;
|
||||
-o-transform-origin: 50% 50%;
|
||||
transform-origin: 50% 50%;
|
||||
-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);
|
||||
-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 {
|
||||
-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 {
|
||||
-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);
|
||||
-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 {
|
||||
background-color: #ffffff;
|
||||
|
|
@ -682,77 +726,90 @@ body.page-home #footer {
|
|||
background-color: rgba(255, 255, 255, 0);
|
||||
border: 1px solid #fff;
|
||||
-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-two,
|
||||
.block-three,
|
||||
.block-four {
|
||||
.block-1,
|
||||
.block-2,
|
||||
.block-3,
|
||||
.block-4 {
|
||||
top: 0;
|
||||
left: 72px;
|
||||
-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);
|
||||
-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;
|
||||
-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;
|
||||
top: 0;
|
||||
left: 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;
|
||||
top: 72px;
|
||||
/* -webkit-transform:translate3d(0,-100px,0) scaleY(1); */
|
||||
-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;
|
||||
-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);
|
||||
-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;
|
||||
-webkit-transform: translate3d(0, 0, 0) scale(1, 1);
|
||||
/* -webkit-animation:PopIn 300ms 1 ease-in; */
|
||||
/* animation:PopIn 300ms 1 ease-in; */
|
||||
-moz-transform: translate3d(0, 0, 0) scale(1, 1);
|
||||
-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;
|
||||
-webkit-transform: translate3d(0, 0, 0) scale(1, 1);
|
||||
/* -webkit-animation:PopIn 300ms 1 ease-in; */
|
||||
/* animation:PopIn 300ms 1 ease-in; */
|
||||
-moz-transform: translate3d(0, 0, 0) scale(1, 1);
|
||||
-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;
|
||||
-webkit-transform: translate3d(0, 0, 0) scale(1, 1);
|
||||
/* -webkit-animation:PopIn 300ms 1 ease-in; */
|
||||
/* animation:PopIn 300ms 1 ease-in; */
|
||||
}
|
||||
@-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.9);
|
||||
-webkit-animation-timing-function: ease-out;
|
||||
animation-timing-function: ease-out;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
-webkit-transform: translate3d(0, 0, 0) scale(1);
|
||||
}
|
||||
-moz-transform: translate3d(0, 0, 0) scale(1, 1);
|
||||
-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);
|
||||
}
|
||||
.outline-btn {
|
||||
background-color: transparent;
|
||||
|
|
|
|||
Loading…
Reference in New Issue