کد – نمایش دهنده ۳۶۰ درجه ای محصول

آموزش

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

 

 

دمو نمایش دهنده ۳۶۰ درجه ای محصول

 

نمایش دهنده ۳۶۰ درجه ای محصول

ساختار 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 میزان اصطکاک در هنگام کشیدن تصویر و ماوس را مشخص میکند (باید بیشتر از ۰ باشد ) .

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

المان <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 {
  ۰% {
    transform: translateX(-50%) scale(0);
  }
  ۶۰% {
    transform: translateX(-50%) scale(1.1);
  }
  ۱۰۰% {
    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 موجود در جیکوئری موبایل استفاده کرده ایم .

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

 

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

پسورد فایل ivahid.com
امتیاز شما در رابطه با این مقاله ؟
بدبدمعمولیخوبخیلی عالی
1 رای, 4 از 5
Loading...
دیدگاه شما عزیزان
  • مازیار 10 خرداد 1398

    با سلام
    مطلب بسیار جالبی بود می خواستم بپرسم نرم افزاری می شناسید که برای تبدیل مدل سه بعدی به کدهاای نمایش در وب بتواند کمک کند مثلا برای کسی مثل من که با برنامه نویسی در وب آشنایی ندارم وقتی بخواهم یک مدل ۳ بعدی بصورت ۳۶۰ درجه در وب نمایش دهم قابل استفاده باشد ؟
    ممنون بابت مطلب خوبتون

    • مجید عابد 11 خرداد 1398

      سلام خدمت شما
      ممنون که نظر خود را با ما در میان گذاشتید . بر اساس محلی که میخواهید این مدل ها را استفاده کنید (مثلا وردپرس و سایر سیستم های مدیریت محتوا و فروشگاهی) افزونه هایی وجود دارد که میتوانید با جستجو کردن در اینترنت آنها را پیدا کنید .