Автор

Просмотр изображений 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



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

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

Отображать город посетителя для улучшения конверсионных показателей магазина. Готовый код вставки в любое место сайта с указанием города, региона и страны. Я перелапатил много скриптов, но именно этот оказался самым простым и результативным!


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

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


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

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


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

Еще одна полезная для сайтов вещь - вставка текущей даты. Примеров скриптов даты можно найти в интернете десятки, однако многие из них, на мой взгляд, тяжеловесны и, следовательно, некрасивы. Между тем, используя стандартные средства JavaScript, вставить дату на страницу сайта можно очень просто. Я его очень часто применяю! На картинке (скриншот с действующего сайта)  усадьбы «Сказка»!


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

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


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

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

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close