<div class="main">
<div class="top half">
<img src="fXp6r5l.jpg" />
</div>
<div class="bottom half">
<img src="fXp6r5l.jpg" />
</div>
<button class="super-button">ВОЙТИ</button>
<div class="overlay"></div>
<div class="button-line left">
<div class="inner"></div>
</div>
<div class="button-line right">
<div class="inner"></div>
</div>
</div>
<div class="content">
<div class="hello">Welcome!</div>
<nav>
<ul>
<li class="active"><a href="#">Главная!</a></li>
<li><a href="#">Настройки</a></li>
<li><a href="#">Фотографии</a></li>
<li><a href="#">Контакты</a></li>
<li><a href="#">Информация</a></li>
</ul>
</nav>
</div>

@font-face {
font-family: decade;
}
@mixin transition($dur) {
-webkit-transition: $dur;
-moz-transition: $dur;
-ms-transition: $dur;
-o-transition: $dur;
transition: $dur;
}
@mixin transitionDelay($dur) {
-webkit-transition-delay: $dur;
-moz-transition-delay: $dur;
-ms-transition-delay: $dur;
-o-transition-delay: $dur;
transition-delay: $dur;
}
@mixin translateXY($x: 0, $y: 0) {
-webkit-transform: translateX($x) translateY($y);
-moz-transform: translateX($x) translateY($y);
-ms-transform: translateX($x) translateY($y);
-o-transform: translateX($x) translateY($y);
transform: translateX($x) translateY($y);
}
@mixin translateXYandScale($x: 0, $y: 0, $scale: 0) {
-webkit-transform: translateX($x) translateY($y) scale($scale);
-moz-transform: translateX($x) translateY($y) scale($scale);
-ms-transform: translateX($x) translateY($y) scale($scale);
-o-transform: translateX($x) translateY($y) scale($scale);
transform: translateX($x) translateY($y) scale($scale);
}
@mixin rotate($deg) {
-webkit-transform: rotate($deg);
-moz-transform: rotate($deg);
-ms-transform: rotate($deg);
-o-transform: rotate($deg);
transform: rotate($deg);
}
@mixin scale($val) {
-webkit-transform: scale($val);
-moz-transform: scale($val);
-ms-transform: scale($val);
-o-transform: scale($val);
transform: scale($val);
}
@mixin clearfix {
content: "";
display: table;
clear: both;
}
$green: #c7ff66;
$gray: #dcdcdc;
$lightGray: #8f8f8f;
$darkBg: rgba(49,49,49, .7);
$red: #ff5954;
*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
@include transition(.3s);
list-style-type: none;
margin: 0;
padding: 0;
}
a {
color: inherit;
text-decoration: none;
}
html, body {
width: 100%;
height: 100%;
overflow: hidden;
}
body {
font-family: decade;
}
.half {
position: absolute;
overflow: hidden;
z-index: 50;
left: 0;
width: 100%;
height: 50%;
@include transition(3s);

img {
position: absolute;
top: -10%;
left: 0;
width: 100%;
}

&.top {
top: 0;
}

&.bottom {
top: 50%;

img {
top: -110%;
}
}

&.active.top {
@include translateXY(0, -100%);
}

&.active.bottom {
@include translateXY(0, 100%);
}
}
.super-button {
position: absolute;
left: 50%;
top: 50%;
z-index: 200;
width: 200px;
height: 80px;
opacity: 0.8;
@include translateXY(-50%, -50%);
text-transform: uppercase;
font-size: 40px;
font-weight: bold;
color: $lightGray;
background-color: transparent;
border: 4px solid rgba(143,143,143, 0.5);
@include transition(1.5s);

&:hover {
color: #fff;
opacity: 1;
border-color: #fff;
}

&:hover ~ .overlay {
background-color: rgba(155, 0, 0, .5);
}
&:hover ~ .overlay.active {
background-color: transparent;
}

&:hover ~ .button-line .inner {
max-width: 100%;
}

&.active {
@include transition(4.5s);
@include translateXY(-50%, -1000px);
}

}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 100;
background-color: rgba(155, 0, 0, 0);
@include transition(1.5s);

&.active {
background-color: transparent;
}
}
.button-line {
position: absolute;
top: -webkit-calc(50% - 2px);
top: -moz-calc(50% - 2px);
top: calc(50% - 2px);
left: 0;
z-index: 200;
width: -webkit-calc(50% - 100px);
width: -moz-calc(50% - 100px);
width: calc(50% - 100px);
height: 4px;
background-color: rgba(143,143,143, 0.5);
@include transition(.5s);

&.left {
@include rotate(180deg);
}

&.right {
left: -webkit-calc(50% + 100px);
left: -moz-calc(50% + 100px);
left: calc(50% + 100px);
}

.inner {
width: 100%;
height: 100%;
background-color: #fff;
max-width: 0;
@include transition(1.5s);
}

&.active {
opacity: 0;
}
}
.content {
position: absolute;
padding: 50px;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 40;
background-color: #1d1f20;

.hello {
font-size: 50px;
font-weight: bold;
color: $red;
text-transform: uppercase;
position: absolute;
top: 50%;
left: 50%;
opacity: 0;
@include translateXYandScale(-50%, -50%, 0.5);
@include transition(1s);
}

nav {
margin: 0 auto;
border: 2px solid #fff;
opacity: 0;
@include scale(0.5);
@include transition(1s);
max-width: 900px;

ul {
font-size: 0;

li {
display: inline-block;
font-size: 25px;
text-transform: uppercase;
color: #fff;
padding: 5px 10px;
border-right: 2px solid #fff;

&:last-child {
border-right: none;
}

&.active {
color: $red;
}

&:hover {
color: $red;
}
}
}
}

&.active {

.hello {
opacity: 1;
@include transitionDelay(1.5s);
@include translateXYandScale(-50%, -50%, 1);
}

nav {
@include transitionDelay(1.5s);
@include scale(1);
opacity: 1;
}
}
}

$(document).ready(function() {
$(document).on("click", ".super-button", function() {
$(".main, .half, .overlay, .button-line, .super-button, .content").addClass("active");
setTimeout(function() {
$(".main *").css("z-index", "1");
}, 3000);
});
});