تخفیف

سبد خرید

نمایش خلاصه ای از خرید هایی که شما انجام خواهید داد

مبلغ کل
0
تسویه حساب
سبد خرید خالی می باشد

سورس js نمایش 360 درجه و سه بعدی تصاویر محصولات فروشگاهتان
حميد  شریفی
حميد شریفی
تعداد کل دانلود ها : 734232
تعداد کل مطالب : 1350

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

تعداد دانلود:
445
تعداد بازدید:
2905
تاریخ:

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

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

 

ایجاد ساختار

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


 
Product Preview
 
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 {
   //...
}
محصولات مشابه فروشی
هشتگ ها :

این محصول بدون نظر می باشد شما میتوانید اولین نظر را ثبت کنید

ارسال نظر

آخرین های مشابه مشاهده بیشتر

  • تلفن : 04136383693
  • پیامک : 500020606688
  • آدرس : آذربایجان شرقی، تبریز، شهرک مصلی، خیابان راجی، راجی 4، کوچه بیست هشتم، قطعه 1339، طبقه چهارم

ملت وب در سال 1393 فعالیت خود را در چهار بخش قالب های آماده، طراحی لوگو، طراحی سایت، طراحی بنر آغاز کرده است، که در مدت بسیار کم با تلاش های بی وقفه خود و همکاران توانسته بزرگترین وب سایت ارائه دهنده قالب های با کیفیت در ایران باشد رمز موفقیت شرکت ملت وب پشتیبانی بی دریغ از کاربران خود می باشد ما موقعیت خود را مدیون مشتریان وفادار خود هستیم پس همیشه همراهشان خواهیم بود .

  • logo-samandehi