کد – نمایش دهنده 360 درجه ای محصول

امروز براتون آموزشی آماده کرده ایم که با استفاده از آن بتوانید نمایش دهنده 360 درجه ای محصول اضافه کنید . هدف امروز فروشگاه های اینترنتی پر کردن فضای خالی بین کاربر و محصول موجود در فروشگاه اینترنتی است . اگر کاربر بتواند محصول را از تمامی زوایا بررسی کند و حس ملموسی نسبت به آن پیدا کند صد در صد میتواند با اطمینان خاطر بیشتری نسبت به خرید آن اقدام نماید . این آموزش میتواند کمک زیادی به دارندگان فروشگاه های اینترنتی و طراحان سایت کند .

دمو نمایش دهنده 360 درجه ای محصول

نمایش دهنده 360 درجه ای محصول

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

<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 -->

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

افزودن استایل

المان <img> تنها در ابتدا نمایان است . در حالی که تکه های تصویر هنوز در حال لود شدن هستند . همچنین با استفاده از المان figure.product-viewer برای دادن ابعاد مناسب به تصویر کمک میکند .

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

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

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

زمانی که تکه های تصویر لود شد ، ما از هندل کننده رویدادهای mousedown/mousemove/mouseup برای بررسی رویدادها استفاده میکنیم .

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

برای انجام این کار در دستگاه های لمسی ما از رویدادهای vmousedown/vmousemove/vmouseup موجود در جیکوئری موبایل استفاده کرده ایم .

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

منبع : https://codyhouse.co