Автор

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

Все популярней становятся сайты, в котором реализованы интерактивные фоны, зачастую это анимацию, какие-то не значительные эффекты, ранее ресурсы не всем позволяли просматривать "тяжелые" сайты, но сейчас прогресс не стоит на месте и интернет и мобильные устройства идут почти в ногу со своими дестктопными товарищами. Все мы знаем, что такие мобильные устройства на iOS и Windows Phone не поддерживают просмотр видео реализованных с помощью flash проигрывателя, но они прекрасно работают с HTML5.


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

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


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

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


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

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


105 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close