Вращающиеся на 360 градусов 3D фото товаров
- Stats: 2270 1
- Author: RUDEBOX
- Category: Технології
- Comments: Комментариев нет
Обзор товара весьма важен не только для покупателя, но и для продавца, по этому данная технология для просмотра изображений в последнее время весьма популярное. Ранее уже мы рассказывали о подобном приеме, но сегодня хотелось бы уделить больше внимания данному подходу. Мы создадим слайдер изображений который будет вращать изображения, при этом у нас будет индикатор, который покажет процесс загрузки все слоев, что не позволит пользователю увидеть недозагруженный слайдер. Слайдер весьма легкий в конструкции и практичен.
Идея нашего слайдера состоит в использовании спрайтов изображения и их привязки к определенному кадру для создания полноценного образа. Вы можете использовать данный прием, чтобы показать внешний вид любого гаджета (автомобиля, телефона и.д.). Или для чего у вас хватит фантазии. И так, давайте приступим.
Шаг 1. HTML
HTML структура состоит из двух основных элементов: figure.product-viewer для спрайтов изображения для продукта предварительного просмотра, а также div.cd-product-viewer-handle для просмотра промотки внизу страницы.
1 2 3 4 5 6 7 8 9 10 11 12 |
<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="Просмотр изображений"> <div class="product-sprite" data-image="img/product.png"></div> </figure> <div class="cd-product-viewer-handle"> <span class="fill"></span> <span class="handle">Прокрутка</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-viewer-wrapper .product-viewer { position: relative; overflow: hidden; } .cd-product-viewer-wrapper img { display: block; position: relative; z-index: 1; } .cd-product-viewer-wrapper .product-sprite { position: absolute; z-index: 2; top: 0; left: 0; height: 100%; 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 { opacity: 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-product-viewer-handle { position: relative; z-index: 2; width: 60%; max-width: 300px; height: 4px; background: #4d4d4d; } .cd-product-viewer-handle .fill { 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 { 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 { 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); } } |
Примечание: кадры, составляющие ваш спрайт-изображение должны иметь одинаковое соотношение сторон для лучшего просмотра конечного изображения.
Шаг 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 |
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'); this.friction = this.element.data('friction'); this.visibleFrame = 0; this.loaded = false; //... this.loadFrames(); }</p> productViewer.prototype.loadFrames = function() { var self = this, imageUrl = this.slideShow.data('image'); $('<img/>').attr('src', imageUrl).load(function() { self.loaded = true; }); this.loading('0.5'); //анимация загрузки индикатора } var productToursWrapper = $('.cd-product-viewer-wrapper'); productToursWrapper.each(function(){ new productViewer($(this)); }); |
После того, как спрайт-изображение было загружено, мы применяем обработчик событий для MouseDown / MouseMove / MouseUp к соответствующим элементам:
1 2 3 4 5 6 7 8 9 |
if( self.loaded ){ //cпрайт изображение было загружено self.element.addClass('loaded'); self.dragImage(); self.dragHandle(); //.. } else { //... } |
Для данного эффекта для корректной работы на сенсорных устройствах, мы использовали vmousedown / vmousemove / vmouseup, предоставляемый мобильной поддержкой JQuery.
Отправить ответ