Автор

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

 

Вот и всё!

Многие материалы на сайте взяты из блогов: "Все для веб-дизайнера Rudebox", "A free library of HTML, CSS, JS nuggets Codyhouse" - полностью переведен и представлен в ознакомительных целях!

vk.com/club.ssdru

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



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

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

Вторичная панель содержимого, которая складывается плотно, поддерживается CSS-преобразованиями и jQuery.


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

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


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

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


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

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


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

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


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

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

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close