Автор

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

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


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

 

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

 

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

 

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



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

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

Иногда вы просто хотите, чтобы на вашем сайте была оригинальная навигация и я предлагаю вашему вниманию интересное решение адаптивного 3D меню для сайта.


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

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


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

Любой вебразработчик или дизайнер сайтов, которому когда-либо доводилося ознакомиться со стилевою системою Twitter Bootstrap, уж конечно помнит, что в ней применяются значки Glyphicons (120 штук) для оформления кнопок, и панелей инструментов, и пунктов в списках, и так далее. Распространяются эти значки бесплатно и свободно (по лицензии CC BY 3.0).


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

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


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

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


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

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

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close