Автор

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)'
});
});
})

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

Вот и все. Готово!


vk.com/club.ssdru

Подписывайтесь на нашу группу в контакте vk.com/club.ssdru


Статьи по темеjQuery

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

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


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

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


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

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


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

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


105 Публикаций

Раскрутка в соцсетях

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


Перейти в Блог

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

Верстальщик с большим опытом работы. Занимаюсь созданием сайтов с 2005 года. Постоянно обучаюсь и совершенствую свои навыки. Веду свои проекты, в том числе и данный блог.

Close