Отзывчивая форма подписки

demosourse

Подписка пользователя — дело не простое. Каждая деталь может сорвать процесс. Именно поэтому стоит уделить данной теме предельное внимание.

Вместо тысячи слов, взгляните на функционал в анимационной форме:

Структура

HTML структура предельно проста: все поля помещены в элемент <form>, блоки с сообщениями помещены в 3 div-а. Для названия поля мы использовали <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>

Стили

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

.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(). Так же, если в строке будет присутствовать знак @ добавляем класс .is-active элементу <form>.

$('.cd-form .cd-email').keyup(function(event){
	var emailInput = $(this),
		insertedEmail = emailInput.val(),
		atPosition = insertedEmail.indexOf("@");
    	dotPosition = insertedEmail.lastIndexOf(".");
    if (atPosition< 1 || dotPosition<atPosition+2 ) {
  $('.cd-form').removeClass('is-active').find('.cd-loading').off('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend');
    } else {

    	$('.cd-form').addClass('is-active');
    }
});

При отправке формы мы добавляем класс .is-submitted для отображения анимации загрузки.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: https://codyhouse.co/gem/responsive-newsletter-form/
Перевел: Станислав Протасевич
Урок создан: 21 Марта 2016
Просмотров: 5948
Правила перепечатки

5 последних уроков рубрики "CSS"

^ Наверх ^