Автор

04 06.2017
Просмотр изображений 360 градусов на jQuery

Просмотр изображений 360 градусов на jQuery


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

 

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

 

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

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

 

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

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

<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 указывает количество кадров, из которых состоит нескольких изображения, тогда как тип данных определяет их при перетаскивании изображения (оно должно быть больше нуля) ,

 

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

Элемент <img> отображается только в начале, в то время как изображения по-прежнему загружается и используется, чтобы дать правильные размеры элементу figure.product-viewer.
Что касается div.product-sprite, он имеет абсолютное положение, высоту 100% и ширину 1600% (наш div.product-sprite состоит из 16 кадров) и по умолчанию скрыт. Затем загруженный класс используется для отображения справки div.product после загрузки спрайта изображения:

.cd-product-viewer-wrapper .product-viewer {
  position: relative;
  overflow: hidden;
}
.cd-product-viewer-wrapper img {
  /* this is the image visible before the image sprite is loaded */
  display: block;
  position: relative;
  z-index: 1;
}
.cd-product-viewer-wrapper .product-sprite {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  height: 100%;
  /* our image sprite is composed of 16 frames */
  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 {
  /* image sprite has been loaded */
  opacity: 1;
}

Когда пользователь перетаскивает span.handle или изображение продукта, мы меняем значение div.product-sprite translateX, чтобы показать другой кадр изображения (используя 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 {
  /* this is used to create the loading fill effect */
  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 {
  /* image sprite has been loaded */
  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 {
  /* image sprite has been loaded */
  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');
	//increase this value to increase the friction while dragging on the image - it has to be bigger than zero
	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');
	//you need this to check if the image sprite has been loaded
	$('').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 ){
	//sprite image has been loaded
	self.element.addClass('loaded');
	self.dragImage();
	self.dragHandle();
	//..
} else {
	//...
}

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

 

Вот и всё!


vk.com/club.ssdru

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


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

19 05.2017
Просмотр изображений 360 градусов на jQuery

Простой шаблон, который использует свойство CSS фона для добавления фиксированного фонового эффекта.


08 06.2017
Просмотр изображений 360 градусов на jQuery

Простой, отзывчивый слайдер с радиальным эффектом перехода на основе SVG clipPath и элементов маски.


20 09.2013
Просмотр изображений 360 градусов на jQuery

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


12 02.2017
Просмотр изображений 360 градусов на jQuery

Вчера рылся в инете на предмет найти что-то интересное и удача не обошла меня стороной, я нарыл на зарубежном сайте этот пример Parallax Scroll Effects, правда пришлось немного повозиться чтоб его скачать, а точнее сохранить себе. Буквально около 3 часов мытарства собрал всё воедино, и теперь вы сможете оценить, скачать и использовать в своих нуждах этот пример!


105 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close