Вращающиеся на 360 градусов 3D фото товаров
Обзор товара весьма важен не только для покупателя, но и для продавца, по этому данная технология для просмотра изображений в последнее время весьма популярное. Ранее уже мы рассказывали о подобном приеме, но сегодня хотелось бы уделить больше внимания данному подходу. Мы создадим слайдер изображений который будет вращать изображения, при этом у нас будет индикатор, который покажет процесс загрузки все слоев, что не позволит пользователю увидеть недозагруженный слайдер. Слайдер весьма легкий в конструкции и практичен.
Шаг 1. HTML
HTML структура состоит из двух основных элементов: figure.product-viewer для спрайтов изображения для продукта предварительного просмотра, а также div.cd-product-viewer-handle для просмотра промотки внизу страницы.
1 2 3 4 5 6 7 8 9 10 11 12 | <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 минимизирует интервалы стыковки кадров при перемещении изображений (значение должно быть больше нуля).
Шаг 2. CSS
Элемент <img> виден только в самом начале, в то время как спрайт-изображение все еще загружается, и используется , чтобы дать правильные размеры для значения figure.product-viewer. Что касается класса div.product-sprite, он имеет абсолютную позицию, а именно: высоту 100% и ширину 1600% ( наш обзор в 360 градусов состоит из 16 кадров) и скрыт по умолчанию. Затем класс .loaded используется , чтобы показать процесс для атрибута div.product-sprite — который служит для подгрузки спрайт-изображений:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | .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 будет скрыт.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 | .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 метод, чтобы проверить, были ли загружены все спрайт изображения:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | переменная 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 к соответствующим элементам:
1 2 3 4 5 6 7 8 9 | если (self.loaded) { //cпрайт изображение было загружено self.element.addClass ( 'загружен'); self.dragImage (); self.dragHandle (); //.. } Еще { //... } |
Для данного эффекта для корректной работы на сенсорных устройствах, мы использовали vmousedown / vmousemove / vmouseup, предоставляемый мобильной поддержкой JQuery.
Вот и все. Готово!
Источник: rudebox.org.ua