360 Derece Ürün Sayfası Hazırlamak

360-derece-urun-gosterimi

Kolay düzenlenebilir, 360 derece ürün çevirebileceğiniz ücretsiz script ve kullanımına dair anlatımı aşağıda bulabilirsiniz.

HTML

<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="Product Preview">
<div class="product-sprite" data-image="img/product.png"></div>
</figure> <!-- .product-viewer -->
<div class="cd-product-viewer-handle">
<span class="fill"></span>
<span class="handle">Handle</span>
</div>
</div> <!-- .cd-product-viewer-handle -->
</div> <!-- .cd-product-viewer-wrapper -->

CSS

.cd-product-viewer-wrapper .product-viewer {
position: relative;
overflow: hidden;
}
.cd-product-viewer-wrapper img {
/* this is the image visible before the image sprite is loaded */
display: block;
position: relative;
z-index: 1;
}
.cd-product-viewer-wrapper .product-sprite {
position: absolute;
z-index: 2;
top: 0;
left: 0;
height: 100%;
/* our image sprite is composed of 16 frames */
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 {
/* image sprite has been loaded */
opacity: 1;
}
.cd-product-viewer-handle {
position: relative;
z-index: 2;
width: 60%;
max-width: 300px;
height: 4px;
background: #4d4d4d;
}
.cd-product-viewer-handle .fill {
/* this is used to create the loading fill effect */
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 {
/* image sprite has been loaded */
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 {
/* image sprite has been loaded */
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);
}
}

JavaScript

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');
//increase this value to increase the friction while dragging on the image - it has to be bigger than zero
this.friction = this.element.data('friction');
this.visibleFrame = 0;
this.loaded = false;
//...
this.loadFrames();
} 
productViewer.prototype.loadFrames = function() {
var self = this,
imageUrl = this.slideShow.data('image');
//you need this to check if the image sprite has been loaded
$('<img/>').attr('src', imageUrl).load(function() {
self.loaded = true;
});
this.loading('0.5'); //triggers loading animation
}
var productToursWrapper = $('.cd-product-viewer-wrapper');
productToursWrapper.each(function(){
new productViewer($(this));
});
2
3
4
5
6
7
8
9
if( self.loaded ){
//sprite image has been loaded
self.element.addClass('loaded');
self.dragImage();
self.dragHandle();
//..
} else {
//...
}

DemoÜcretsiz İndir

Destekleyen tarayıcılar: IE9+, Chrome, Firefox, Safari, Opera

Hakan Demirel

pcanalist.com kurucularından Hakan Demirel, özel bir şirkette Front-end Developer olarak çalışmakta. Twitter üzerinden @hakandemirel hesabını takip edebilir yada hakandemirel.com adresinden daha fazla bilgi alabilirsiniz.

Bunlar da hoşunuza gidebilir...

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Yandex.Metrica