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

Stats: 2206 1
Author: RUDEBOX
Category: Технології
Comments: Комментариев нет

Заказать рекламу: info@it-media.kiev.ua Звоните: +380934169249

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

ДЕМОНСТРАЦИЯ ИСХОДНИКИ

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

Шаг 1. HTML

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

&lt;div class="cd-product-viewer-wrapper" data-frame="16" data-friction="0.33"&gt;
&lt;div&gt;
&lt;figure class="product-viewer"&gt;
&lt;img src="img/product-loading.jpg" alt="Просмотр изображений"&gt;
&lt;div class="product-sprite" data-image="img/product.png"&gt;&lt;/div&gt;
&lt;/figure&gt;
&lt;div class="cd-product-viewer-handle"&gt;
&lt;span class="fill"&gt;&lt;/span&gt;
&lt;span class="handle"&gt;Прокрутка&lt;/span&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;

<div>

</figure>

<span class="handle">Прокрутка</span>

</div>

Атрибуты 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 - который служит для подгрузки спрайт-изображений:

.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;
}

.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 будет скрыт.

.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);
}
}

.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 метод, чтобы проверить, были ли загружены все спрайт изображения:

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');
$('&lt;img/&gt;').attr('src', imageUrl).load(function() {
self.loaded = true;
});

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

var productToursWrapper = $('.cd-product-viewer-wrapper');
productToursWrapper.each(function(){
new productViewer($(this));
});

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 к соответствующим элементам:

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

if( self.loaded ){

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

self.element.addClass('loaded');

self.dragImage();

self.dragHandle();

//..

} else {

//...

}

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