سورس js نمایش 360 درجه و سه بعدی تصاویر محصولات فروشگاهتان

در طراحی تجارت الکترونیک یکی از اهداف اصلی این است که فاصله بین محصول و کاربر را پر کنید. این به ویژه برای کالاهای با قیمت بالا مرتبط است. از این رو، اهمیت ادغام ابزارهای تعاملی، برای دادن کاربر به یک راه برای "تقریبا تجربه" محصول.

منابع امروز یک منبع ساده و تعاملی است که می تواند برای نشان دادن یک تور مجازی از محصول استفاده شود. ایده قطعه این است که از یک حرکت تصویر استفاده کنید و کشیدن را به یک قاب خاص از آن تصویر پیوند دهید. شما می توانید از آن برای نشان دادن ظاهر یک ابزار تکنولوژی (یا ماشین، مانند نسخه ی نمایشی ما استفاده کنید) یا، به طور کلی، برای ایجاد انیمیشن های فانتزی محصول استفاده کنید.

ایجاد ساختار

ساختار HTML از دو عنصر اصلی تشکیل شده است: figure.product-viewerبرای جن و تصویر پیش نمایش محصول، و div.cd-product-viewer-handleبرای دسته بیننده.

 

Handle

data-frameصفت از div.cd-product-viewer-wrapperتعیین تعداد فریم جن تصویر از تشکیل شده است، در حالی که data-frictionمشخص اصطکاک در حالی که کشیدن بر روی تصویر (آن را به بزرگتر از صفر).

افزودن سبک

عنصر تنها در آغاز قابل مشاهده است، در حالی که چند تصویر است که هنوز هم در حال بارگذاری، استفاده شده است به ابعاد مناسب به figure.product-viewerعنصر. 
در مورد آن div.product-sprite، موقعیت مطلق، ارتفاع 100٪ و عرض 1600٪ (تصویر تصویر ما از 16 فریم تشکیل شده است) و به طور پیش فرض پنهان است. .loadedکلاس است و سپس برای نشان دادن  div.product-spriteیک بار جن تصویر است پر شده است:

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

هنگامی که کاربر span.handleتصویر یا تصویر محصول را بکشید، div.product-spriteارزش ترجمه را تغییر می دهیم تا یک فریم تصویر متفاوت نشان داده شود (با استفاده از جاوا اسکریپت).

توجه داشته باشید: فریم هایی که تصویر خود را به تصویر می اندازند باید دارای نسبت تصویر پیش نمایش محصول باشند.

اثر بارگذاری دسته با تغییر scaleXمقدار span.fillعنصر (با استفاده از جاوا اسکریپت) به دست می آید؛ هنگامی که تصویر جادویی بارگذاری شده است،  span.fillپنهان است و span.handleنشان داده شده است:

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

مدیریت رویدادها

برای پیاده سازی نمایشگر محصول، ما یک 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');
   //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
   $('').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));
});

هنگامی که تصویر جادویی بارگذاری شده است، یک رویداد پردازنده رویدادهای mousedown / mousemove / mouseup را به عناصر مناسب اضافه می کنیم:

if( self.loaded ){
   //sprite image has been loaded
   self.element.addClass('loaded');
   self.dragImage();
   self.dragHandle();
   //..
} else {
   //...
}