3D красивая форма подписки на CSS3 + Javascript | Vladmaxi.net
ГлавнаяВеб-разработчикуJQuery3D красивая форма подписки на CSS3 + Javascript
Дата: 11.06.2013 в 23:01 | Просмотров: 8622

3D красивая форма подписки на CSS3 + Javascript

красивая форма подписки, подписная форма
Скачатьбесплатно с сервера
Демодемонстрация

Красивая форма подписки – цель нашего сегодняшнего урока. Если Вы собираетесь заниматься бизнесом в интернете, имеете свой сайт, то Вам просто необходима подписная форма. Мы постараемся создать привлекательную, элегантную форму с эффектами CSS 3D преобразования и JQuery. Смотрите ещё пример привлекательной формы с эффектом JQuery.

Прошу обратить внимание, что эта форма будет корректно работать в браузерах, которые поддерживают соответствующие CSS3 стили.

Вот, что нам необходимо:

  • Modernizr: для определение поддержки CSS 3D преобразования на стороне пользователя;
  • Framework JQuery: как двигатель для всей анимации и Ajax вызов;
  • Браузер, который поддерживают CSS3 и CSS ​​3D преобразование.

В форму присутствует только поле “Email”, но если Вы хотите, то можете добавить и поле “имя”. Наш 3D эффект будет использован, когда пользователь ввел свой электронный адрес и получает информацию. Итак, приступим…

HTML код

Ниже представлен весь “скелет” формы, для которой мы уже будем писать стили и эффекты jquery.

CSS стилизация

Мы собираемся использовать множество свойств CSS3, на этот раз, например, box-sizing, box-shadow – тени, border-radius – закругление углов, градиент и конечно CSS3 свойства преобразования. Ниже смотрите часть стилей.

А вот и остальная часть кода подписной формы с 3D эффектом. Вы можете увидеть и оценить этот эффект, когда форма успешно отправлена​​. Форма будет отражена по вертикали и появится сообщение, которое Вы зададите.

Все, с оформлением заканчиваем, давайте перейдем с более интересному. :)

Javascript

Хорошо, теперь давайте оживим нашу форму. Мы связываем выполнение функции init() с событием нажатия на кнопку отправки. В форме представлена простая проверка на правильный ввод электронного адреса. Если обнаружена ошибка, форма не будет обрабатываться (поле ввода будет обозначено красным цветом), а если ошибки не найдено, форма будет обработана ​​с помощью AJAX.

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

Вот код скрипта и всех необходимых функций:

Заключение

Вот она! Элегантная и красивая форма подписки с эффектами на CSS3 и JQuery. Я надеюсь, Вам понравится этот урок, дайте мне знать, если у Вас есть какие-либо вопросы. Успехов! ;)


Данный урок подготовлен для вас командой сайта vladmaxi.net
Источник урока: http://www.queness.com
Перевел: Владислав Бондаренко


ВСЕ КОММЕНТАРИИ

    1. Сергей:
      http://denoy.ru/ @

      Спасибо за перевод. Действительно красивая форма.
      Подскажите: куда и как вписывать (в какой файл) настройки с адресом подписки ?
      Для фидбернера или смартреспондера например …

      1. Влад Бондаренко (Admin):
        http://vladmaxi.net

        Здравствуйте! Да, форма действительно эффектная, спасибо за отзыв. Чтобы интегрировать любую форму на какой-либо сервис рассылки, необходимо в коде редактировать форму, form. Если вам необходимо это сделать, обращайтесь – сделаем всё быстро и в лучшем виде:) Скайп: vladmaxi2013

Добавить комментарий