Вращающиеся на 360 градусов 3D фото товаров

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

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

Шаг 1. HTML

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

<DIV класс = "CD-продукт-зритель-обертка" данные кадра = "16" данные трения = "0.33">
<DIV>
<Фигурка класс = "продукт-зритель">
<img src="img/product-loading.jpg" alt="Просмотр изображений">
<DIV класс = "продукт-спрайт" данных изображения = "IMG / product.png"> </ DIV>
</ Цифра>
<DIV класс = "CD-продукт-зритель-ручка">
<SPAN класс = "заполнить"> </ SPAN>
<SPAN класс = "ручка"> Прокрутка </ SPAN>
</ DIV>
</ DIV>
</ DIV>

<DIV>

<Фигурка класс = "продукт-зритель">

</ Цифра>

<SPAN класс = "ручка"> Прокрутка </ SPAN>

</ DIV>

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

Шаг 2. CSS

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

.cd-продукт-зритель-обертка .product-просмотрщик {
позиция: относительная;
переполнение: скрытый;
}
.cd-продукт-зритель-обертка IMG {
Дисплей: блок;
позиция: относительная;
Z-индекс: 1;
}
.cd-продукт-зритель-обертка .product-спрайт {
позицию: абсолютная;
Z-индекс: 2;
верх: 0;
Слева направо: 0;
высота: 100%;
ширина: 1600%;
фон: URL (../ IMG / product.png) не повторять центр-центр;
фон-размер: 100%;
Непрозрачность: 0;
Переход: Непрозрачность 0.3с;
}
.cd-продукт-зритель-wrapper.loaded .product-спрайт {
Непрозрачность: 1;
}

.cd-продукт-зритель-обертка .product-просмотрщик {

позиция: относительная;

переполнение: скрытый;

}

.cd-продукт-зритель-обертка IMG {

Дисплей: блок;

позиция: относительная;

Z-индекс: 1;

}

.cd-продукт-зритель-обертка .product-спрайт {

позицию: абсолютная;

Z-индекс: 2;

верх: 0;

Слева направо: 0;

высота: 100%;

ширина: 1600%;

фон: URL (../ IMG / product.png) не повторять центр-центр;

фон-размер: 100%;

Непрозрачность: 0;

Переход: Непрозрачность 0.3с;

}

.cd-продукт-зритель-wrapper.loaded .product-спрайт {

Непрозрачность: 1;

}

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

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

.cd-продукт-зритель-ручка {
позиция: относительная;
Z-индекс: 2;
ширина: 60%;
макс-ширина: 300px;
высота: 4px;
фон: # 4d4d4d;
}
.cd-продукт-зритель-ручка .Нанести {
позицию: абсолютная;
Z-индекс: 1;
Слева направо: 0;
верх: 0;
высота: 100%;
ширина: 100%;
граница радиуса: наследовать;
фон: # b54240;
преобразование: Scalex (0);
преобразовании координат: левый центр;
Переход: преобразование 0,5с;
}
.loaded .cd-продукт-зритель-ручка .Нанести {
Непрозрачность: 0;
}
.cd-продукт-зритель-ручка .handle {
позицию: абсолютная;
Z-индекс: 2;
Дисплей: встроенный блок;
высота: 44px;
ширина: 44px;
Слева направо: 0;
верх: -20px;
фон: # b54240 URL (../ IMG / CD-arrows.svg) не повторять центр-центр;
граница радиуса: 50%;
преобразование: translateX (-50%) масштаб (0);
}
.loaded .cd-продукт-зритель-ручка .handle {
преобразование: translateX (-50%) шкала (1);
анимация: CD-сильный удар 0.3с 0.3с;
анимационная-фасовочно-режим: то и другое;
}
@keyframes CD-сильный удар {
0% {
преобразование: translateX (-50%) масштаб (0);
}
60% {
преобразование: translateX (-50%) шкалы (1.1);
}
100% {
преобразование: translateX (-50%) шкала (1);
}
}

.cd-продукт-зритель-ручка {

позиция: относительная;

Z-индекс: 2;

ширина: 60%;

макс-ширина: 300px;

высота: 4px;

фон: # 4d4d4d;

}

.cd-продукт-зритель-ручка .Нанести {

позицию: абсолютная;

Z-индекс: 1;

Слева направо: 0;

верх: 0;

высота: 100%;

ширина: 100%;

граница радиуса: наследовать;

фон: # b54240;

преобразование: Scalex (0);

преобразовании координат: левый центр;

Переход: преобразование 0,5с;

}

.loaded .cd-продукт-зритель-ручка .Нанести {

Непрозрачность: 0;

}

.cd-продукт-зритель-ручка .handle {

позицию: абсолютная;

Z-индекс: 2;

Дисплей: встроенный блок;

высота: 44px;

ширина: 44px;

Слева направо: 0;

верх: -20px;

фон: # b54240 URL (../ IMG / CD-arrows.svg) не повторять центр-центр;

граница радиуса: 50%;

преобразование: translateX (-50%) масштаб (0);

}

.loaded .cd-продукт-зритель-ручка .handle {

преобразование: translateX (-50%) шкала (1);

анимация: CD-сильный удар 0.3с 0.3с;

анимационная-фасовочно-режим: то и другое;

}

@keyframes CD-сильный удар {

0% {

преобразование: translateX (-50%) масштаб (0);

}

60% {

преобразование: translateX (-50%) шкалы (1.1);

}

100% {

преобразование: translateX (-50%) шкала (1);

}

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

Шаг 3. JavaScript

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

переменная productViewer = функция (элемент) {
this.element = элемент;
this.handleContainer = this.element.find ( 'CD-продукт-зритель-ручка.');
this.handleFill = this.handleContainer.children ( 'заполнить.');
//...
this.frames = this.element.data ( 'кадр');
this.friction = this.element.data ( 'трение');
this.visibleFrame = 0;
this.loaded = ложь;
//...
this.loadFrames ();
} </ P>
productViewer.prototype.loadFrames = функция () {
вар самостоятельно = это,
ImageUrl = this.slideShow.data ( «образ»);
$ ( '<IMG />'). Attr ( '', SRC) ImageUrl .load (функция () {
self.loaded = TRUE;
});

this.loading('0.5'); //анимация загрузки индикатора
}

переменная productToursWrapper = $ ( 'CD-продукт-зритель-обертка.');
productToursWrapper.each (функция () {
новый productViewer ($ (это));
});

переменная productViewer = функция (элемент) {

this.element = элемент;

this.handleContainer = this.element.find ( 'CD-продукт-зритель-ручка.');

this.handleFill = this.handleContainer.children ( 'заполнить.');

//...

this.frames = this.element.data ( 'кадр');

this.friction = this.element.data ( 'трение');

this.visibleFrame = 0;

this.loaded = ложь;

//...

this.loadFrames ();

} </ P>

productViewer.prototype.loadFrames = функция () {

вар самостоятельно = это,

ImageUrl = this.slideShow.data ( «образ»);

$ ( '<IMG />'). Attr ( '', SRC) ImageUrl .load (функция () {

self.loaded = TRUE;

});

this.loading('0.5'); //анимация загрузки индикатора

}

переменная productToursWrapper = $ ( 'CD-продукт-зритель-обертка.');

productToursWrapper.each (функция () {

новый productViewer ($ (это));

});

После того, как спрайт-изображение было загружено, мы применяем обработчик событий для MouseDown / MouseMove / MouseUp к соответствующим элементам:

если (self.loaded) {
//cпрайт изображение было загружено
self.element.addClass ( 'загружен');
self.dragImage ();
self.dragHandle ();
//..
} Еще {
//...
}

если (self.loaded) {

//cпрайт изображение было загружено

self.element.addClass ( 'загружен');

self.dragImage ();

self.dragHandle ();

//..

} Еще {

//...

}

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

Вот и все. Готово!

Источник: rudebox.org.ua

Вращающиеся на 360 градусов 3D фото товаров