Автор

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

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

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


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

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


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

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


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

Все современные браузеры, кроме IE9- поддерживают CSS transitions и CSS animations, которые позволяют реализовать анимацию средствами CSS, без привлечения JavaScript.


105 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close