Все для веб-дизайнера
Форма «забыли пароль» для сайта с помощью JS
Как часто случалось, что Вы забывали пароль на сайте? думаю с каждым случалась такая ситуация, но менее того, Вас перебрасывает на следующую страницу для восстановления, а затем на следующую, и так множество раз, меня это раздражает, ведь почему недьзя все сделать быстро, не переходя на лишние страницы, в данном уроке мы рассмотрим как создать замечательную, при этом достаточно простую форму «забыли пароль» для сайта с анимацией переключении, а самое главное остаться на одной станицы, выполнив действия максимально быстро.
Много различным бесплатных шаблонов вы можете найти на сайте наших партнеров, также имеются и премиум шаблоны с круглосуточной техподдержкой и помощью в настройке:
Идея состоит в том, что у нас есть форма, а форма «забыли пароль» будет слайдом, которая накладывается на основную форму при ее активации. Выглядит все достаточно просто, но для таких форм излишняя элегантность и не требуется.
Шаг 1. HTML
У нас будет достаточно сложная иерархическая разметка, ведь нам необходимо учесть все нюансы, и по умолчанию скрыть один из контейнеров до момента его активации:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<div id="form_container"> <form id="login"> <input type="text" placeholder="Имя"/> <input type="password" placeholder="Пароль"/> <input type="button" value="Войти"> </form> <form id="forgot"> <input type="text" placeholder="Имя"/> <input type="email" placeholder="Почта"/> <input type="button" value="Восстановить"> </form> </div> <div id="link_container"> <a href="#" id="forgot">Забыли Ваш<strong>пароль?</strong><span class="icn">➥</span></a> <a href="#" id="back">Авторизоваться<span class="icn">➥</span></a> </div> |
У нас будет один основной контейнер с общими правилами form_container, в него будут входить дочерние элементы такие как login и forgot, кроме этого мы добавляем ссылки управления.
Шаг 2. CSS
Нам необходимо стилизовать сам контейнер, установить для него заливку, кроме этого мы устанавливаем анимацию, со скоростью и плоскостью трансформации:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 |
div#form_container { width:295px; height:200px; padding-top:10px; margin:50px auto 10px; overflow:hidden; position:relative; } div#form_container:before{ content:""; width:8px; height:8px; top:6px; left:50%; border-top:1px solid #5c5f70; border-left:1px solid #5c5f70; position:absolute; transform: rotate(45deg); background:#282832; z-index:1; } form { position:absolute; left:0; width:290px; height:185px; padding:25px; border-top:1px solid #5c5f70; border-bottom:3px solid #1e1d25; border-radius:5px; transition:all 0.3s ease-out; box-shadow:1px 1px 3px #333; } form#login { top:10px; background: repeating-linear-gradient(110deg, #282832, #282832 15px, #25252f 15px, #25252f 30px); } form#forgot{ bottom:-195px; background: repeating-linear-gradient(110deg, #32323F, #32323F 15px, #282832 15px, #282832 30px); } input[type="text"],input[type="password"],input[type="email"] { width:240px; height:38px; margin-bottom:3px; border:1px solid #2e2e38; background:white; color:#9d9da5; box-shadow:inset 0px 0px 10px #ccc; border-radius:5px; padding:15px; outline:none; } input[type="button"] { background: rgb(130,188,199); background: -moz-linear-gradient(top, rgba(130,188,199,1) 0%, rgba(79,158,173,1) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(130,188,199,1)), color-stop(100%,rgba(79,158,173,1))); background: -webkit-linear-gradient(top, rgba(130,188,199,1) 0%,rgba(79,158,173,1) 100%); background: -o-linear-gradient(top, rgba(130,188,199,1) 0%,rgba(79,158,173,1) 100%); background: -ms-linear-gradient(top, rgba(130,188,199,1) 0%,rgba(79,158,173,1) 100%); background: linear-gradient(to bottom, rgba(130,188,199,1) 0%,rgba(79,158,173,1) 100%); margin-top:6px; color:white; text-shadow:0 -1px 1px #5794a9; width:240px; height:40px; border-radius:5px; padding:10px 0 15px; border:1px solid #2e2e38; cursor:pointer; } input[type="button"]:active { background: rgb(79,158,173); background: -moz-linear-gradient(top, rgba(79,158,173,1) 0%, rgba(130,188,199,1) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(79,158,173,1)), color-stop(100%,rgba(130,188,199,1))); background: -webkit-linear-gradient(top, rgba(79,158,173,1) 0%,rgba(130,188,199,1) 100%); background: -o-linear-gradient(top, rgba(79,158,173,1) 0%,rgba(130,188,199,1) 100%); background: -ms-linear-gradient(top, rgba(79,158,173,1) 0%,rgba(130,188,199,1) 100%); background: linear-gradient(to bottom, rgba(79,158,173,1) 0%,rgba(130,188,199,1) 100%); text-shadow:0 1px 1px #5794a9; color:#eeeeee; } div#link_container { width:170px; margin:0 auto; text-align:center; } div#link_container a { color:#acaebb; font-family:helvetica,arial,sans-serif; font-size:14px; text-decoration:none; font-weight:100; text-shadow:1px -1px 1 |
Но все стили не обеспечат нам цикличного выполнения поставленной задачи, нам необходимо добавить небольшой код скрипта.
Шаг 3. JS
Нам необходимо выполнение задачи при нажатии на кнопку, кроме этого нам необходимо цикличное выполнение задачи не перебрасывая на другую страницу:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
$(document).on('click','a#forgot',function(e){ e.preventDefault(); $('form#forgot').css('bottom','5px'); $(this).fadeOut('fast',function(){ $('a#back').fadeIn('fast'); }); }); $('div#link_container').on('click','a#back',function(e){ e.preventDefault(); $('form#forgot').css('bottom','-195px'); $(this).fadeOut('fast',function(){ $('a#forgot').fadeIn('fast'); }); }); |
В результате данных манипуляций мы получаем замечательную форму,которая станет отличным дополнением для Вашего ресурса.
Вот и все. Готово!
| Опубликовал Cooper 06.08.2014 в 14:14, в категории Веб-дизайн. Вы можете следить за комментариями через RSS 2.0. Вы можете оставить комментарий или трэкбэк с вашего сайта. |
