Автор

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

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


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

 

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

 

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

 

Шаг 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

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

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


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

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


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

В последнее время стали весьма популярны неординарные решения к построению сайта, зачастую веб-мастера стали отказываться от привычного построения ресурса и разрабатывать новые концепции верстки. Большое влияние на современный веб дизайн оказал дизайн metro ui который покорил своим минимализмом и простотой решений, что дизайнеры принялись разрабатывать сайты под данный интерфейс. В данном уроке мы рассмотрим как создать фиксированное вертикальное меню в стиле metro ui.


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

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


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

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


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

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

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close