Автор

16 01.2019
CSS и jQuery Отзывчивый Форма Информационного бюллетеня

CSS и jQuery Отзывчивый Форма Информационного бюллетеня


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

Размер скачиваемого файла: 104.46 Kb.

 

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

 

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

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

Вот небольшая анимация, которую мы собрали вместе, чтобы показать весь процесс:

CSS и jQuery Отзывчивый Форма Информационного бюллетеня

Создание структуры

Структура HTML довольно проста: метки и поля ввода заключены в <form>, уведомления - это 3 отдельных элемента. Вы можете заметить, что мы использовали элемент <label> для заголовка. Это не семантически правильно, <label> должен описывать, о чем <input>. Поскольку заголовок находится внутри поля ввода жестко, с помощью элемента <label> мы гарантируем, что если пользователь нажимает / щелкает заголовок, ввод электронной почты также становится сфокусированным.

Пустой элемент .cd-loading используется для создания анимированной панели загрузки.

<div class="cd-form-wrapper cd-container">
<form class="cd-form">
<label class="cd-label" for="cd-email">Newsletter</label>
<input type="email" id="cd-email" class="cd-email" name="cd-email" placeholder="Enter your email address">
<input type="submit" class="cd-submit" value="Submit">
<div class="cd-loading"></div>
</form>
<div data-type="message" class="cd-response cd-response-error">Ops! Error message here</div>
<div data-type="message" class="cd-response-success"><p>Great! Success message here</p></div>
<div data-type="message" class="cd-response cd-response-notification">Hey! Notification message here</div>
</div>

 

Добавление стиля

Ниже приведены некоторые основные моменты о том, как мы создали анимацию в CSS. В основном он основан на переходах CSS3, то есть элемент .cd-email (поле ввода электронной почты) вначале принимает полный размер формы. Пока пользователь вводит адрес электронной почты, мы используем jQuery для добавления класса .is-active к форме и меняем нижнее значение для элемента .cd-email с 0 до 50%. Переход, примененный к нижнему свойству, делает движение плавным.

Мы использовали анимацию CSS3 только для элемента .cd-submit (submit button), чтобы добиться эффекта отскока. Если это слишком много, смело используйте переход.

.cd-form {
  position: relative;
}

.cd-form .cd-loading {
  /* loading bar */
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3%;
  width: 100%;
  transform-origin: 0 50%;
  transform: scaleX(0);
  visibility: hidden;
  transition: transform 3s;
}

.cd-form.is-submitted .cd-loading {
  visibility: visible;
  transform: scaleX(1);
}

.cd-email {
  top: 0;
  left: 0;
  width: 100%;
  bottom: 0;
  transition: bottom 0.3s, background-color 0.3s;
  z-index: 1;
}

.is-active .cd-email {
  bottom: 50%;
}

.cd-submit {
  top: 50%;
  /* hidden by default */
  display: none;
  transition: background-color 0.2s;
  z-index: 2;
}

.is-active .cd-submit {
  display: block;
  animation: cd-bounce-in ease-out 0.4s;
}

@keyframes cd-bounce-in {
  0% {
    top: 100%;
  }

  60% {
    top: 45%;
  }

  100% {
    top: 50%;
  }
}

 

Обработка событий

Мы используем событие keyup (), чтобы проверить, какое значение вводит пользователь в поле <input> электронной почты: если он набрал '@', за которым следует точка, мы показываем кнопку отправки, передающую класс .is-active классу <form> элемент.

$('.cd-form .cd-email').keyup(function(event){ 
var emailInput = $(this),
insertedEmail = emailInput.val(),
atPosition = insertedEmail.indexOf("@");
dotPosition = insertedEmail.lastIndexOf(".");
//check if user has inserted a "@" and a dot
if (atPosition< 1 || dotPosition<atPosition+2 ) {
//if he hasn't..
//hide the submit button
$('.cd-form').removeClass('is-active').find('.cd-loading').off('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend');
} else {
//if he has..
//show the submit button
$('.cd-form').addClass('is-active');
}
});

Когда пользователь отправляет форму, мы добавляем класс .is-submit, чтобы показать панель загрузки, и ждем окончания перехода, чтобы показать сообщение об успехе / ошибке.

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

 

Вот и всё!


vk.com/club.ssdru

Подписывайтесь на нашу группу в контакте vk.com/club.ssdru


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

15 04.2013
CSS и jQuery Отзывчивый Форма Информационного бюллетеня

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


13 06.2014
CSS и jQuery Отзывчивый Форма Информационного бюллетеня

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


10 07.2013
CSS и jQuery Отзывчивый Форма Информационного бюллетеня

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


29 04.2013
CSS и jQuery Отзывчивый Форма Информационного бюллетеня

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


105 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close