%d0%b2%d1%80%d0%b0%d1%89%d0%b0%d1%8e%d1%89%d0%b8%d0%b5%d1%81%d1%8f-%d0%bd%d0%b0-360-%d0%b3%d1%80%d0%b0%d0%b4%d1%83%d1%81%d0%be%d0%b2-3d-%d1%84%d0%be%d1%82%d0%be-%d1%82%d0%be%d0%b2%d0%b0%d1%80%d0%beОбзор товара весьма важен не только для покупателя, но и для продавца, по этому данная технология для просмотра изображений в последнее время весьма популярное. Ранее уже мы рассказывали о подобном приеме, но сегодня хотелось бы уделить больше внимания данному подходу. Мы создадим слайдер изображений который будет вращать изображения, при этом у нас будет индикатор, который покажет процесс загрузки все слоев, что не позволит пользователю увидеть недозагруженный слайдер. Слайдер весьма легкий в конструкции и практичен.

 

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

Шаг 1. HTML

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

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

%d0%b2%d1%80%d0%b0%d1%89%d0%b0%d1%8e%d1%89%d0%b8%d0%b5%d1%81%d1%8f-%d0%bd%d0%b0-360-%d0%b3%d1%80%d0%b0%d0%b4%d1%83%d1%81%d0%be%d0%b2-3d-%d1%84%d0%be%d1%82%d0%be-%d1%82%d0%be%d0%b2%d0%b0%d1%80%d0%be

Шаг 2. CSS

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

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

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

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

Шаг 3. JavaScript

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

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

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

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

Читайте также: