Автор

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

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


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

 

ДЕМО
ИСХОДНИКИ

 

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

 

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

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

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

Многие материалы на сайте взяты из блогов: "Все для веб-дизайнера Rudebox", "A free library of HTML, CSS, JS nuggets Codyhouse" - полностью переведен и представлен в ознакомительных целях!

vk.com/club.ssdru

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



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

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

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


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

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


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

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


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

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


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

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


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

Надёжный хостинг

С нами хостинг удобен и прост, как диван у вас дома. Вы с комфортом размещаетесь, а все внутренние пружины мы берем на себя.

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


Перейти на хостинг

О КОМПАНИИ

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

Close

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


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

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

Close