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


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

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

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

1. Оформление списка HTML5 с использованием иконок WebFonts
2. Создаем собственный шрифт из иконок для сайта
3. Возврат к основам или как создать HTML5 шаблон?!

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

Шаг 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>

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

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

Шаг 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;
}

Когда пользователь перетаскивает 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);
}
}

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

Шаг 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 ($ (это));
});

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

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

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

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

 

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

Previous 23 Бесплатных адаптивных шаблонов для OpenCart
Next 45+ бесплатных материалов для веб дизайнеров за август 2016

Suggested Posts

Простые ползунки для публикаций с отражением

Selectric — пользовательский select

Модальные окна с размытым фоном на CSS3

Как убрать смотреть все в подкатегориях

Адаптивный шаблон Opencart 2.1.0.1-2.1.0.2 — Magazin

Модуль Гугл Карты для Opencart 1.5.x