Предпросмотр товаров в 360 градусов на jQuery

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

Сложность

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

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

HTML разметка будет содержать два основных элемента: figure.product-viewer для спрайтового изображения и изображения предварительного просмотра, а также div.cd-product-viewer-handle для ручки вращения товара.

<div class="cd-product-viewer-wrapper" data-frame="16" data-friction="0.33">
	<div>
		<figure class="product-viewer">
			<img src="/img/product-loading.jpg" alt="Product Preview">
			<div class="product-sprite" data-image="img/product.png"></div>
		</figure> <!-- .product-viewer -->
 
		<div class="cd-product-viewer-handle">
			<span class="fill"></span>
			<span class="handle">Handle</span>
		</div>
	</div> <!-- .cd-product-viewer-handle -->
</div> <!-- .cd-product-viewer-wrapper -->

Атрибут data-frame в контейнере div.cd-product-viewer-wrapper определяет из какого количества кадров состоит наше спрайтовое изображение, в то время как data-friction определяет перемещение по изображению (оно должно быть больше нуля)

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

Элемент img отображается только в самом начале, при загрузке спрайтового изображения, а также используется для установки правильных размеров элемента figure.product-viewer.

Что касается контейнера div.product-sprite, он имеет следующие свойства: position: absolute, height: 100% и width: 1600% (наш спрайт состоит из 16 кадров) и скрыт по умолчанию. Затем используем класс .loaded, для отображения div.product-sprite после загрузки спрайтового изображения:

.cd-product-viewer-wrapper .product-viewer {
  position: relative;
  overflow: hidden;
}
.cd-product-viewer-wrapper img {
  display: block;
  position: relative;
  z-index: 1;
}
.cd-product-viewer-wrapper .product-sprite {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  height: 100%;
  width: 1600%;
  background: url(../img/product.png) no-repeat center center;
  background-size: 100%;
  opacity: 0;
  transition: opacity 0.3s;
}
.cd-product-viewer-wrapper.loaded .product-sprite {
  opacity: 1;
}

Когда пользователь перетаскивает span.handle или изображение продукта, мы меняем значение translateX у контейнера div.product-sprite, для смены кадра изображения (с помощью JavaScript).

Обратите внимание, что кадры должны иметь одинаковое соотношение сторон.

Эффект движения ручки достигается путем изменения значения scaleX в элементе span.fill (с помощью JavaScript); после загрузки спрайта, скрываем span.fill и отображаем span.handle:

.cd-product-viewer-handle {
  position: relative;
  z-index: 2;
  width: 60%;
  max-width: 300px;
  height: 4px;
  background: #4d4d4d;
}
.cd-product-viewer-handle .fill {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  border-radius: inherit;
  background: #b54240;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.5s;
}
.loaded .cd-product-viewer-handle .fill {
  opacity: 0;
}
.cd-product-viewer-handle .handle {
  position: absolute;
  z-index: 2;
  display: inline-block;
  height: 44px;
  width: 44px;
  left: 0;
  top: -20px;
  background: #b54240 url(../img/cd-arrows.svg) no-repeat center center;
  border-radius: 50%;
  transform: translateX(-50%) scale(0);
}
.loaded .cd-product-viewer-handle .handle {
  transform: translateX(-50%) scale(1);
  animation: cd-bounce 0.3s 0.3s;
  animation-fill-mode: both;
}
@keyframes cd-bounce {
  0% {
    transform: translateX(-50%) scale(0);
  }
  60% {
    transform: translateX(-50%) scale(1.1);
  }
  100% {
    transform: translateX(-50%) scale(1);
  }
}

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

Для реализации просмотра товара, мы создали объект productViewer и используем метод loadFrames, чтобы проверить загрузку спрайтового изображения:

var productViewer = function(element) {
	this.element = element;
	this.handleContainer = this.element.find('.cd-product-viewer-handle');
	this.handleFill = this.handleContainer.children('.fill');
	//...
	this.frames = this.element.data('frame');
	this.friction = this.element.data('friction');
	this.visibleFrame = 0;
	this.loaded = false;
	//...
	this.loadFrames();
} 
 
productViewer.prototype.loadFrames = function() {
	var self = this,
		imageUrl = this.slideShow.data('image');
	$('').attr('src', imageUrl).load(function() {
		self.loaded = true;
	});
 
	this.loading('0.5'); //triggers loading animation
}
 
var productToursWrapper = $('.cd-product-viewer-wrapper');
productToursWrapper.each(function(){
	new productViewer($(this));
});

После загрузки спрайта, мы обрабатываем события mousedown/mousemove/mouseup соответствующих элементов:

if( self.loaded ){
	self.element.addClass('loaded');
	self.dragImage();
	self.dragHandle();
	//..
} else {
	//...
}

Для работы на сенсорных устройствах, мы использовали события vmousedown/vmousemove/vmouseup благодаря фреймворку jQuery mobile

ДЕМО СКАЧАТЬ

 

Перевод статьи 360 Degrees Product Viewer

Тэги: plugin

Вход

Уважаемый пользователь! Мы обнаружили, что вы используете AdBlock и вынуждены скрыть часть материалов на нашем сайте. Siteacademy существует и развивается за счет доходов от рекламы. Просим внести наш сайт в список исключений или отключить Блокировщик рекламы на нашем сайте.