Автор

29 05.2017
Оформление покупки или заказа

Оформление покупки или заказа


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

 

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

 

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

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

Достаточно говорить, давайте погрузимся в код;)

Ресурсы:

  1. Velocity.js от Юлиана Шапиро.
  2. Иконки из Nucleo.

 

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

Структура html состоит из двух основных элементов: ul.cd-pricing, которое является ценовой таблицей, и div.cd-form, которая является формой модального окна.

Каждый план включает заголовок с названием и ценой плана, функции div.cd-pricing - со списком функций и нижний колонтитул с кнопкой вызова к действию.

Структура формы довольно проста. Только одно примечание: есть пустой элемент div.cd-plan-info, который будет заполнен с использованием jQuery с информацией о плане, выбранной пользователем (в основном с клоном div.cd-pricing-header и .cd-pricing-features ).

<ul class="cd-pricing">
<li>
<header class="cd-pricing-header">
<h2>Basic</h2>

<div class="cd-price">
<span>$9.99</span>
<span>month</span>
</div>
</header> <!-- .cd-pricing-header -->

<div class="cd-pricing-features">
<ul>
<li class="available"><em>Feature 1</em></li>
<li><em>Feature 2</em></li>
<li><em>Feature 3</em></li>
<li><em>Feature 4</em></li>
</ul>
</div> <!-- .cd-pricing-features -->

<footer class="cd-pricing-footer">
<a href="#0">Select</a>
</footer> <!-- .cd-pricing-footer -->
</li>

<li>
<!-- ... -->
</li>

<li>
<!-- ... -->
</li>
</ul> <!-- .cd-pricing -->

<div class="cd-form">

<div class="cd-plan-info">
<!-- content will be loaded using jQuery - according to the selected plan -->
</div>

<div class="cd-more-info">
<h3>Need help?</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>

<form action="">
<fieldset>
<legend>Account Info</legend>

<div class="half-width">
<label for="userName">Name</label>
<input type="text" id="userName" name="userName">
</div>

<div class="half-width">
<label for="userEmail">Email</label>
<input type="email" id="userEmail" name="userEmail">
</div>

<div class="half-width">
<label for="userPassword">Password</label>
<input type="password" id="userPassword" name="userPassword">
</div>

<div class="half-width">
<label for="userPasswordRepeat">Repeat Password</label>
<input type="password" id="userPasswordRepeat" name="userPasswordRepeat">
</div>
</fieldset>

<fieldset>
<!-- ... -->
</fieldset>

<fieldset>
<!-- ... -->
</fieldset>
</form>

<a href="#0" class="cd-close"></a>
</div> <!-- .cd-form -->

<div class="cd-overlay"></div> <!-- shadow layer -->

 

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

CSS для этого ресурса довольно прост. Просто некоторые подсказки: класс .empty-boxдобавляется в элемент .cd-pricing> li, когда форма становится видимой. Поскольку мы клонируем весь элемент списка (и размещаем его внутри формы), исходный все еще существует. В этом случае мы использовали класс .empty-box, чтобы скрыть исходный элемент списка.

.cd-pricing > li {
  position: relative;
  margin: 0 auto 2.5em;
  background-color: #ffffff;
  border-radius: .3em .3em .25em .25em;
  box-shadow: 0 2px 8px rgba(2, 4, 5, 0.5);
}
 
.cd-pricing > li.empty-box {
  box-shadow: none;
}
 
.cd-pricing > li.empty-box::after {
  /* placeholder visible when .cd-form is open - in this case same color of the background */
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #0f222b;
}

Мы также используем класс .empty-box для того, чтобы нажимать кнопку действия в нижнем колонтитуле, чтобы он возвращался назад, когда пользователь закрывает форму (от шкалы (0) до масштаба (1)).

.cd-pricing-footer a {
  transition: transform 0.3s;
}
 
.empty-box .cd-pricing-footer a {
  /* scale down to 0 the action button when sign up form is visible */
  transform: scale(0);
}

Форма div.cd находится в положении: исправлено; И по умолчанию он не имеет размера. Когда пользователь нажимает на кнопку выбора, мы делаем вид видимым (от видимости: скрытый, до видимости: visible;), присваиваем ему тот же размер элемента списка цен и анимируем его, делая его больше. Это создает иллюзию того, что сам элемент ценообразования увеличивается, а div.cd-form имеет тот же размер и содержит те же элементы (клоны - которые затем перемещаются, чтобы освободить место для формы покупки).

/* -------------------------------- 
 
Form 
 
-------------------------------- */
 
.cd-form {
  position: fixed;
  z-index: 2;
  background-color: #ffffff;
  border-radius: .25em;
  visibility: hidden;
  transition: visibility 0s 0.8s;
 
  /* Force Hardware Acceleration in WebKit */
  transform: translateZ(0);
  backface-visibility: hidden;
}
 
.cd-form.is-visible {
  /* form is visible */
  visibility: visible;
  transition: visibility 0s 0s;
}

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

.cd-form .cd-pricing-features::before {
  /* this is the layer which covers the .cd-pricing-features when the form is open - visible only on desktop */
  content: '';
  position: absolute;
  /* fix a bug while animating - 1px white space visible */
  top: -5px;
  left: 0;
  
  height: calc(100% + 5px);
  width: 100%;
  background-color: #95ac5f;
 
  will-change: transform;
  transform: scaleY(0);
  transform-origin: center top;
  transition: transform 0.6s 0.2s;
}

 

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

Функция animateForm () была определена для анимации модальной формы: когда пользователь выбирает объект заказа, функция оценивает позицию и размер выбранного элемента таблицы калькуляции и назначает их .cd-form, чтобы она полностью покрывала цену Элемент (который скрыт с использованием класса .empty-box).

Затем начинается анимация: мы обновляем ширину и высоту .cd-form до ее конечных значений и переводим их так, чтобы она была сосредоточена в окне просмотра.

//form is the .cd-form element
form.velocity(
{
	'width': tableWidth+'px', //pricing table item width
	'height': tableHeight+'px', //pricing table item height
	'top': formTopValue, //final top value of the form 
	'left': formLeftValue, //final top value of the form 
	'translateX': formTranslateX+'px', //difference between formLeftValue and pricing table item left value
	'translateY': formTranslateY+'px', //difference between formTopValue and pricing table item top value
	'opacity': 1,
}, 0, function(){
	//table is the pricing table item
	table.addClass('empty-box');
	
	form.velocity(
	{
		'width': formFinalWidth+'px', //form final width
		'height': formFinalHeight+'px', //form final height
		'translateX': 0,
		'translateY': 0,
	}, 
	//animation duration
	animationDuration, 
	//spring easing
	[ 220, 20 ]).addClass('is-visible');
});

Когда пользователь закрывает модальный, поля полей формы скрыты (изменение их непрозрачности до 0), а затем выполняется обратная анимация (задержка для анимации определяется с использованием переменной задержки).

 

Вот и всё!


vk.com/club.ssdru

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


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

27 04.2013
Оформление покупки или заказа

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


24 12.2015
Оформление покупки или заказа

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


10 06.2017
Оформление покупки или заказа

Простой шаблон портфолио с изображениями предварительного просмотра проекта, которые выдвигаются, чтобы показать выбранный проект.


16 05.2013
Оформление покупки или заказа

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


105 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close