This commit is contained in:
Robin Hägg 2015-09-10 18:02:45 +02:00
parent 16120cad84
commit 181795fcb2
6 changed files with 37 additions and 28 deletions

View File

@ -1,4 +1,5 @@
<div class="page row process">
<div class="bgel">&nbsp;</div>
<div class="process-band response-band">
<div class="cgbg title-box">
<h1>Our Process</h1>

View File

@ -7,6 +7,7 @@
</div>
</div>
</div>
<div class="col splashspacer">&nbsp;</div>
<div class="col postsplash" id="content">
<div class="row top-icon-row">
<div class="col">

View File

@ -7,6 +7,7 @@
</div>
</div>
</div>
<div class="col splashspacer">&nbsp;</div>
<div class="col postsplash" id="content">
<div class="row top-icon-row">
<div class="col">

View File

@ -7,6 +7,7 @@
</div>
</div>
</div>
<div class="col splashspacer">&nbsp;</div>
<div class="col postsplash" id="content">
<div class="row top-icon-row">
<div class="col">

View File

@ -51,10 +51,9 @@
}
.page.process {
@include backgrounder("process-background", "jpg", "no-repeat fixed center/cover");
.bgel{position:fixed;top:0;width:100%;height:100%;@include backgrounder("process-background", "jpg", "no-repeat center/cover");}
height:1%;
width:100%;
position:relative;
.process-band {
@include std-shadow;
@ -164,10 +163,13 @@
.splash {
height:100%;
min-height:700px;
min-height:500px;
width:100%;
position:fixed;
z-index:1;
@media all and(max-height:500px){
position:absolute;
}
.splash-text {
position:absolute;
bottom:20%;
@ -180,9 +182,12 @@
}
}
}
.splashspacer{
height:100%;
min-height:500px;
width:100%;
}
.postsplash {
position:absolute;
top:100%;
z-index:2;
background:$hardgrey;
text-align:center;

View File

@ -258,40 +258,40 @@ body {
opacity: 1;
}
}
&.anim-pos .page {
&.animate {
transition: transform 0.5s ease-out;
position: absolute;
}
&.leave {
transform:translate(-100%,0)
}
&.leave.active {
transform:translate(-100%,0)
}
&.enter {
transform:translate(100%,0)
}
&.enter.active, &.leave {
transform:translate(0,0)
}
}
&.anim-neg .page {
&.animate {
transition: transform 0.5s ease-out;
transition: right 0.5s ease-out;
position: absolute;
}
&.leave {
transform:translate(100%,0)
right:-100%;
}
&.leave.active {
transform:translate(100%,0)
right:-100%;
}
&.enter {
transform:translate(-100%,0)
right:100%;
}
&.enter.active, &.leave {
transform:translate(0,0)
right:0;
}
}
&.anim-pos .page {
&.animate {
transition: right 0.5s ease-out;
position: absolute;
}
&.leave {
right:100%;
}
&.leave.active {
right:100%;
}
&.enter {
right:-100%;
}
&.enter.active, &.leave {
right:0;
}
}
}