Все для веб-дизайнера
Как создать анимированную контактную форму
Связь с администратором на сайте является не последним ключевым звеном в сайтостроении, ведь если посетителю что-то не понятно, он может написать об этом в контактной форме, оставив при этом свои данные для дальнейшего ответа. Зачастую такие формы достаточно однообразные и не бросаются в глаза, что приводит к потере положительных отзывов о ресурсе. Но если вы не хотите повторять ошибки большинства, и создать нечто уникальное и притягивающее взор посетителя, тогда данная анимированная контактная форма станет вам весьма интересна.
Основная идея состоит в том, что контактная форма находится в письме и напоминает клочок бумаги, на которой можно написать сообщение и отправить его администратору. При этом происходит анимация разворота бумаги из конверта. Форма работае в браузерах, поддерживающих переходы CSS3. И так, приступим.
Шаг 1. HTML
Для начала мы создадим простую разметку, в которой элемент #form_wrap позиционируется относительно (top:0), а конверт фиксируется у него внизу.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<div id='form_wrap'> <form> <p>Связаться с Администратором сайта</p> <label for="email">Cообщение : </label> <textarea name="message" value="Your Message" id="message" ></textarea> <p>Укажите личную информацию</p> <label for="name">Имя: </label> <input type="text" name="name" value="" id="name" /> <label for="email">E-mail: </label> <input type="text" name="email" value="" id="email" /> <input type="submit" name ="submit" value="Готово. Отправить!" /> </form> </div> |
Элемент form позиционируется относительно (top:200px). Специальный слой перекрывает form и #form_wrap. При наведении курсора на элемент #form_wrap, его высота и высота элемента form увеличиваются на 350px, и одновременно изменяется свойство top элемента #form_wrap до значения -200px.
Затем подготовим части конверта, Видимая часть над письмом (after.png) и нижняя часть под письмом (before.png).
Шаг 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 |
label { margin: 11px 20px 0 0; font-size: 16px; color: #b3aba1; text-transform: uppercase; text-shadow: 0px 1px 0px #fff; } input[type=text], textarea { font: 14px normal normal uppercase helvetica, arial, sans-serif; color: #7c7873;background:none; width: 380px; height: 36px; padding: 0px 10px; margin: 0 0 10px 0; border:1px solid #f8f5f1; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -moz-box-shadow: inset 0px 0px 1px #726959; -webkit-box-shadow: inset 0px 0px 1px #b3a895; box-shadow: inset 0px 0px 1px #b3a895; } textarea { height: 80px; padding-top:14px;} textarea:focus, input[type=text]:focus {background:rgba(255,255,255,.35);} #form_wrap input[type=submit] { position:relative;font-family: 'YanoneKaffeesatzRegular'; font-size:24px; color: #7c7873;text-shadow:0 1px 0 #fff; width:100%; text-align:center; opacity:0; background:none; cursor: pointer; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; } #form_wrap:hover input[type=submit] {z-index:1;opacity:1;} #form_wrap:hover input:hover[type=submit] {color:#435c70;} |
Далее установим параметры перехода для form и #form_wrap.
|
1 2 3 4 |
-webkit-transition: all 1s ease-in-out .3s; -moz-transition: all 1s ease-in-out .3s; -o-transition: all 1s ease-in-out .3s; transition: all 1s ease-in-out .3s; |
Следующий этап весьма интересный, мы добавляем трансформацию для элемента input[type=submit]. Первый набор соответствует действиям, когда курсор мыши покидает элемнет #form_wrap, а второй — когда курсор мыши заходит на элемент #form_wrap.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
#form_wrap input[type=submit] { -webkit-transition: opacity 0.6s ease-in-out 0s; -moz-transition: opacity .6s ease-in-out 0s; -o-transition: opacity .6s ease-in-out 0s; transition: opacity .6s ease-in-out 0s; } #form_wrap:hover input[type=submit] { -webkit-transition: opacity .5s ease-in-out 1.3s; -moz-transition: opacity .5s ease-in-out 1.3s; -o-transition: opacity .5s ease-in-out 1.3s; transition: opacity .5s ease-in-out 1.3s; } |
Поддержка Internet Explorer
Теперь добавим поддержку IE, для этого добавим код jQuery, чтобы эффект работал в IE. Трансформация будет немного отличаться.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<!--[if IE]><script> $(document).ready(function() { $("#form_wrap").addClass('hide'); $("#form_wrap").prepend( '<div id="before"></div>').append( '<div id="after"</div>'); $("#form_wrap").hover(function(){ $(this).stop(true, false).animate({ height : '836px', top : '-200px' }, 2000); $('form').stop(true, false).animate({ height : '580px' }, 2000, function(){ $('#form_wrap input[type=submit]').css({'z-index' : '1', 'opacity' : '1'})} ) }, function() { $('#form_wrap input[type=submit]').stop(true, true).css({ 'opacity' : '0'}) $(this).stop(true, false).animate({ height : '446px', top : '0px' }, 2000); $('form').stop(true, false).animate({ height : '200px'}, 2000) }) }) </script><![endif]--> |
Затем установим стили для некоторых элементов #form_wrap.hide:after, #form_wrap.hide:before {display:none;}.
|
1 2 3 4 5 6 7 8 9 |
#before {position:absolute; bottom:128px;left:0px; background:url('images/before.png'); width:530px;height: 316px;} #after {position:absolute; bottom:0px;left:0; background:url('images/after.png'); width:530px;height: 260px; } |
Вот и все. Готово!
Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.
| Опубликовал Cooper 17.09.2012 в 19:28, в категории CSS. Вы можете следить за комментариями через RSS 2.0. Вы можете перейти в конец записи и оставить комментарий. Пинги запрещены. |
