Автор

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

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


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

 

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

 

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

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

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

Ресурсы:

  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), а затем выполняется обратная анимация (задержка для анимации определяется с использованием переменной задержки).

 

Вот и всё!

Многие материалы на сайте взяты из блогов: "Все для веб-дизайнера Rudebox", "A free library of HTML, CSS, JS nuggets Codyhouse" - полностью переведен и представлен в ознакомительных целях!

vk.com/club.ssdru

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



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

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

Отображение морфинга, которое оживляет в соответствии с размером его содержимого.


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

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


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

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


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

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


75 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close