10 июн 2015
Анимированная страница входа на сайт
Ares Категория: Web-Мастеру » Уроки
У нас вы можете скачать бесплатно Анимированная страница входа на сайт .

Данный материал предоставлен сайтом Skripter.info исключительно в ознакомительных целях. Администрация не несет ответственности за его содержимое.
Анимированная страница входа на сайт

Вы видели сайты, которые встречают Вас страницей-оглавлением для всего сайта? Они доставляют ощущение завершенности, перфекционизма, и это совсем не преувеличение, так считают многие. Начальная страница часто используется для выбора языка, или чтобы отвлечь пользователя от ожидания прогрузки «тяжелого» сайта. Такой трюк весьма распространен в современном сайтостроении и я советую Вам обратить на него внимание.

У нас есть изображение, которое будет оформлено центровой, анимированной кнопкой, пр наведении на которую будет происходит эффект затухание фона, или в нашем варианте цветовая заливка с установленной степенью прозрачности.



Шаг 1. HTML

Для начала нам необходимо разместить все элементы в хронологическом порядке на странице, я забыл Вам сказать, что при нажатии на кнопку, у нас будет происходить разворот страницы в котором будет отображаться навигация сайта:

<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>


У нас будет навигация, которая содержит приветствие и пять основных пунктов навигации оформленной блоками.

Шаг 2. CSS

Нам необходимо определить общие параметры контейнера, устанавливаем параметры трансформации при наведении на кнопку, ведь нам необходимо ее оживить, и добавить значение, согласно которого у нас будет окрашиваться фон, привлекая внимание на исключительно на кнопку:

@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;
}
}
}


Также мы устанавливаем значение, при котором будет анимироваться разворот при нажатии на кнопку.

Шаг 3. JS

В самом конце, нам необходимо добавить немного магии, и оживить нашу задумку, задав значение для нашей кнопки:

$(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);
});
});


Данный эффект я планирую использовать в своих работах, надеюсь он также станет Вам полезным.

Готово!

Скачивание файлов доступно только зарегистрированным пользователям










Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.