Форма входа на сайт с эффектом параллакса

jQuery 28.11.2014

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

ДЕМО

ИСХОДНИКИ

Такой эффект станет отличным решением, для персональной странички или студии-портфолио, где Вам необходимо максимально удивить пользователей своими умениями в разработке, и так, давайте приступим.

Шаг 1. HTML

Разметка будет разделена на несколько блоков, в одном из которых мы подключаем очередность фонов, которые будут изменяться и создавать эффект динамики:

<div class="bg-wrapper">
<div class="bg-grad orange active"></div>
<div class="bg-grad red"></div>
<div class="bg-grad purple"></div>
<div class="bg-grad blue"></div>
<div class="bg-grad green"></div>
<div class="bg-grad yellow"></div>
</div>
<div class="login-wrapper">
<div class="x-wrapper">
<div class="y-wrapper">
<div class="title-wrapper">
<h2>Здравствуйте!</h2>
<h4>Войти</h4>
</div>
<div class="input-box">
<input type="text" id="username" value="" placeholder="username" />
<input type="password" id="password" value="" placeholder="password" /><span class="show-pass icon-eye" title="show characters"></span>
</div>
<div class="button-wrapper">
<a href="#">Забыли пароль</a> | <a href="#">Авторизация</a>
<span class="login-btn">Войти&raquo;</span>
</div>
</div>
</div>
</div>

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

Шаг 2. CSS

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

.button-wrapper{
padding: 10px 8px;
color: rgba(0, 0, 0, 0.3);
font-size: 12px;
font-style: italic;
}
.button-wrapper a{
color: rgba(0, 0, 0, 0.4);
font-size: 12px;
font-style: italic;
text-decoration: none;
}
.button-wrapper a:hover{
color: rgba(255, 255, 255, 0.7);
}
.login-btn{
font-family: 'Marketing Script', serif;
font-size: 24px;
color: rgba(255, 255, 255, 0.9);
text-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);
opacity: 1;
margin-top: -5px;
cursor: pointer;
float: right;
}
.login-wrapper{
width: 400px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
perspective: 500px;
}
.x-wrapper{
width: 100%;
transform: rotateX(0deg);
perspective: 500px;
}
.y-wrapper{
width: 100%;
transform: rotateY(0deg);
}
.input-box{
border-radius: 5px;
position: relative;
padding: 30px 50px;
border: 1px solid rgba(221, 221, 221, 0.8);
box-shadow: 0 5px 11px rgba(0, 0, 0, 0.2);
background: rgba(255, 255, 255, 0.8);
background: -moz-linear-gradient(bottom, rgba(221, 221, 221, 0.8) 0%, rgba(255, 255, 255, 0.8) 100%);
background: -webkit-linear-gradient(bottom, rgba(221, 221, 221, 0.8) 0%, rgba(255, 255, 255, 0.8) 100%);
background: linear-gradient(to top, rgba(221, 221, 221, 0.8) 0%, rgba(255, 255, 255, 0.8) 100%);
}
.input-box input{
width: 100%;
border: none;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.5);
border-radius: 5px;
background: rgba(255, 255, 255, 0.6);
font-size: 19px;
padding: 8px 12px;
color: rgba(0, 0, 0, 0.8);
font-weight: bold;
}
.input-box input:first-child{
margin-bottom: 12px;
}
.input-box .show-pass{
right: 60px;
font-size: 21px;
bottom: 33px;
text-shadow: 0 0 3px #fff;
cursor: pointer;
color: rgba(0, 0, 0, 0.2);
position: absolute;
}
.input-box .show-pass.showing{
color: rgba(0, 0, 0, 0.7);
}
/* Фон формы авторизации */
.bg-grad{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
-webkit-transition: opacity 5s linear;
transition: opacity 5s linear;
background: #f17009;
}
.bg-grad.active{
opacity: 1;
}
.bg-grad.orange{
background: #f17009;
background: -moz-linear-gradient(30deg, #f17009 0%, #ee620d 24%, #f19109 74%, #f17009 100%);
background: -webkit-linear-gradient(30deg, #f17009 0%, #ee620d 24%, #f19109 74%, #f17009 100%);
background: linear-gradient(60deg, #f17009 0%, #ee620d 24%, #f19109 74%, #f17009 100%);
}
.bg-grad.red{
background: #f1093f;
background: -moz-linear-gradient(30deg, #f1093f 0%, #ee0d2d 24%, #f10960 74%, #f1093f 100%);
background: -webkit-linear-gradient(30deg, #f1093f 0%, #ee0d2d 24%, #f10960 74%, #f1093f 100%);
background: linear-gradient(60deg, #f1093f 0%, #ee0d2d 24%, #f10960 74%, #f1093f 100%);
}
.bg-grad.purple{
background: #a709f1;
background: -moz-linear-gradient(30deg, #a709f1 0%, #8c09f1 24%, #d309f1 74%, #a709f1 100%);
background: -webkit-linear-gradient(30deg, #a709f1 0%, #8c09f1 24%, #d309f1 74%, #a709f1 100%);
background: linear-gradient(60deg, #a709f1 0%, #8c09f1 24%, #d309f1 74%, #a709f1 100%);
}
.bg-grad.blue{
background: #097bf1;
background: -moz-linear-gradient(30deg, #097bf1 0%, #0971f1 24%, #09a2f1 74%, #097bf1 100%);
background: -webkit-linear-gradient(30deg, #097bf1 0%, #0971f1 24%, #09a2f1 74%, #097bf1 100%);
background: linear-gradient(60deg, #097bf1 0%, #0971f1 24%, #09a2f1 74%, #097bf1 100%);
}
.bg-grad.green{
background: #1eb65e;
background: -moz-linear-gradient(30deg, #1eb65e 0%, #19a83e 24%, #1bcd66 74%, #1eb65e 100%);
background: -webkit-linear-gradient(30deg, #1eb65e 0%, #19a83e 24%, #1bcd66 74%, #1eb65e 100%);
background: linear-gradient(60deg, #1eb65e 0%, #19a83e 24%, #1bcd66 74%, #1eb65e 100%);
}
.bg-grad.yellow{
background: #ffc000;
background: -moz-linear-gradient(30deg, #ffc000 0%, #ffa200 24%, #ffde00 74%, #ffc000 100%);
background: -webkit-linear-gradient(30deg, #ffc000 0%, #ffa200 24%, #ffde00 74%, #ffc000 100%);
background: linear-gradient(60deg, #ffc000 0%, #ffa200 24%, #ffde00 74%, #ffc000 100%);
}

Шаг 3. JS

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

$(function(){
/***** Трансформация фона *****/
var transTime = 5000;
var numBgColors = $('.bg-grad').length;
var bgtrans = setInterval(function(){
if($('.bg-grad.active').index() == ($('.bg-grad').length-1)){
$('.bg-grad.active').removeClass('active');
$('.bg-grad').eq(0).addClass('active');
}else{
var curIndex = $('.bg-grad.active').index();
$('.bg-grad.active').removeClass('active');
$('.bg-grad').eq(curIndex+1).addClass('active');
}
},transTime);
/***** Показать/скрыть пароль *****/
$('.show-pass').click(function(){
if($(this).hasClass('showing')){
$(this).attr('title', 'show characters');
$(this).removeClass('showing');
$('#password').attr('type', 'password');
}else{
$(this).attr('title', 'hide characters');
$(this).addClass('showing');
$('#password').attr('type', 'text');
};
});
/***** ПАРАЛЛАКС *****/
var moveSpeed = 0.05;
var login = $('.login-wrapper');
var transX = $('.x-wrapper');
var transY = $('.y-wrapper');
var winMidX = $(window).width()/2;
var winMidY = $(window).height()/2;
$(window).resize(function(){
winMidX = $(window).width()/2;
winMidY = $(window).height()/2;
});
$(window).mousemove(function(e){
var mX = e.pageX;
var mY = e.pageY;
var xDif = winMidX - mX;
var yDif = winMidY - mY;
login.css({
marginTop: yDif*moveSpeed,
marginLeft: xDif*moveSpeed,
});
transX.css({
"-webkit-transform": 'rotateX('+(yDif*moveSpeed)*-1+'deg)',
"-moz-transform": 'rotateX('+(yDif*moveSpeed)*-1+'deg)',
"transform": 'rotateX('+(yDif*moveSpeed)*-1+'deg)'
});
transY.css({
"-webkit-transform": 'rotateY('+(xDif*moveSpeed)*-1+'deg)',
"-moz-transform": 'rotateY('+(xDif*moveSpeed)*-1+'deg)',
"transform": 'rotateY('+(xDif*moveSpeed)*-1+'deg)'
});
});
})

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