Автор

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

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


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

 

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

 

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

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

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

Ресурсы:

  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

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

В передыдущем уроке «Интересные кнопки поделиться в соцсетях на CSS3» я уже писал как можно сделать красивые кнопки для соцсетей. Продолжая эту тему хочу поделиться еще одним примером как можно оформить свой сайт! В данном примере используется только CSS и не каких скриптов!


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

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


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

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


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

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


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

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


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

Надёжный хостинг

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

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


Перейти на хостинг

О КОМПАНИИ

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

Close

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


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

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

Close