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

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

Шаг 1. HTML

Для начала мы создадим простую разметку, в которой элемент #form_wrap позиционируется относительно (top:0), а конверт фиксируется у него внизу.

Элемент form позиционируется относительно (top:200px). Специальный слой перекрывает form и #form_wrap. При наведении курсора на элемент #form_wrap, его высота и высота элемента form увеличиваются на 350px, и одновременно изменяется свойство top элемента #form_wrap до значения -200px.

Затем подготовим части конверта, Видимая часть над письмом (after.png) и нижняя часть под письмом (before.png).

Шаг 2. CSS

Для начала добавим стили для элементов данной формы.

Далее установим параметры перехода для form и #form_wrap.

Следующий этап весьма интересный, мы добавляем трансформацию для элемента  input[type=submit]. Первый набор соответствует действиям, когда курсор мыши покидает элемнет #form_wrap, а второй — когда курсор мыши заходит на элемент #form_wrap.

Поддержка Internet Explorer

Теперь добавим поддержку IE, для этого добавим код jQuery, чтобы эффект работал в IE. Трансформация будет немного отличаться.

 Затем установим стили для некоторых элементов #form_wrap.hide:after, #form_wrap.hide:before {display:none;}.

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

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.