Автор

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

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


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

 

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

 

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

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

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

Ресурсы:

  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

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

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


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

Здравствуйте, уважаемые читатели моего блога! А Вы пользуетесь генераторами CSS3 или HTML5? Если нет, то может стоит попробовать. Просто представьте, можно отказаться от ручного описания стилей для кнопок, углов в блоках, теней, градиентов если кто использует и так далее, так же HTML5. Зачем писать один и тот же код каждый раз при создании нового проекта, когда можно «забить» параметры в окошечки нажать кнопочку и получить готовый исходный код, а если надо то и пофиксить его!
В этой статье покажу Вам подборку из таких генераторов. Преимущественно это будут генераторы CSS3 и парочка для HTML5.


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

Фиксированная навигация, которая позволяет вашим пользователям получать доступ к меню в любое время, пока они испытывают ваш веб-сайт. Он меньше фиксированного заголовка полной ширины и заменяет кнопку «назад к началу» более умным решением UX.


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

Шумиха по поводу CSS4 возникла абсолютно из ниоткуда, так как мы только привыкли к CSS3, и все планируют использовать эту технологию еще какое-то время. Разработчики браузеров усиленно работают над тем, чтобы их продукт поддерживал самые последние эффекты и свойства, а разработчики внешних интерфейсов создают все больше и больше инструментов для более эффективной работы с таблицами стилей. И сейчас довольно странно слышать что-либо о CSS4. Сразу навязывается вопрос: «А как же CSS3? Разве уже всё?».


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

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


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

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

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close