هیچ دیدگاهی ثبت نشده
نمایش 360 درجه محصول در وب
سلامی دوباره خدمت شما هواداران عزیز،
امروز براتون یه سورس عالی گذاشتم که میتونید با این سورس به طور 360 درجه محصولتون رو نمایش بدید.
اگه کد های JS رو ببینید میبینید که جدا چیز خاصی نداره و فقط ایده مهم بوده 😀 که تنها کاری که باید بکنید اینه که از دور تا دور محصولتون عکس بگیرید و فقط لینک بدید.
شما میتونید از بخش نمایش نمونه ببینید که چه چیز جالبیه.
ساخت پایه صفحه
بخش HTML یا همون پایه صفحه شامل دو DIV اصلی میشه یکی figure.product-viewer برای بخش عکسمون و یکی div.cd-product-viewer-handle برای چرخوندن عکسی که قراره نمایش بدیم.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<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 قرار گرفته است.
و قسمت div.product-sprite, position این قسمت absolute است و height و width این قسمت به ترتیب 100% و 1600% است, ( چون این قسمت 16 فریم داره ) و hidden است به طور پیشفرض. بخش .loaded بعدا برای نمایش در بخش div.product-sprite وقتی که تمامی عکس ها لود شدند:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
.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 مقدار translateX برای نمایش بک فرم دیگر ( با استفاده از JavaScript ).
افکت لود شدن صفحه دسته بندی شده با عوض کردن مفدار scaleX قسمت span.fill ( با استفاده از JavaScript ); وقتی که بخش عکس کامل لود شد, بخش span.fill hidden میشود و span.handle نمایش داده میشود:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
.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); } } |
بخش Event handler ها
برای اجرای نمایش محصول ما باید, productViewer رو بسازم و استفاده کنیم از متود loadFrames تا ببینیم که عکس ها لود شده یا نه:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
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)); }); |
وقتی که بخش عکس ها کامل لود شد, ما یک event handler برای event قسمت mousedown/mousemove/mouseup اضافه میکنیم تا قسمت های دیگر مناسب شود :
|
1 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 { //... } |
برای اینکه پشتبانی کنه دستگاه های لمسی رو , ما از event بخش vmousedown/vmousemove/vmouseup استفاده کردیم که توسط jQuery mobile framework ساخته شده است.
امیدوارم توضیحات کامل باشه و استفاده کافی رو برده باشید.
نظر یادتون نره
موفق باشد 😉
نمایش 360 درجه محصول در وب
سلامی دوباره خدمت شما هواداران عزیز،
امروز براتون یه سورس عالی گذاشتم که میتونید با این سورس به طور 360 درجه محصولتون رو نمایش بدید.
اگه کد های JS رو ببینید میبینید که جدا چیز خاصی نداره و فقط ایده مهم بوده 😀 که تنها کاری که باید بکنید اینه که از دور تا دور محصولتون عکس بگیرید و فقط لینک بدید.
شما میتونید از بخش نمایش نمونه ببینید که چه چیز جالبیه.
ساخت پایه صفحه
بخش HTML یا همون پایه صفحه شامل دو DIV اصلی میشه یکی figure.product-viewer برای بخش عکسمون و یکی div.cd-product-viewer-handle برای چرخوندن عکسی که قراره نمایش بدیم.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<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 قرار گرفته است.
و قسمت div.product-sprite, position این قسمت absolute است و height و width این قسمت به ترتیب 100% و 1600% است, ( چون این قسمت 16 فریم داره ) و hidden است به طور پیشفرض. بخش .loaded بعدا برای نمایش در بخش div.product-sprite وقتی که تمامی عکس ها لود شدند:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
.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 مقدار translateX برای نمایش بک فرم دیگر ( با استفاده از JavaScript ).
افکت لود شدن صفحه دسته بندی شده با عوض کردن مفدار scaleX قسمت span.fill ( با استفاده از JavaScript ); وقتی که بخش عکس کامل لود شد, بخش span.fill hidden میشود و span.handle نمایش داده میشود:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
.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); } } |
بخش Event handler ها
برای اجرای نمایش محصول ما باید, productViewer رو بسازم و استفاده کنیم از متود loadFrames تا ببینیم که عکس ها لود شده یا نه:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
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)); }); |
وقتی که بخش عکس ها کامل لود شد, ما یک event handler برای event قسمت mousedown/mousemove/mouseup اضافه میکنیم تا قسمت های دیگر مناسب شود :
|
1 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 { //... } |
برای اینکه پشتبانی کنه دستگاه های لمسی رو , ما از event بخش vmousedown/vmousemove/vmouseup استفاده کردیم که توسط jQuery mobile framework ساخته شده است.
امیدوارم توضیحات کامل باشه و استفاده کافی رو برده باشید.
نظر یادتون نره
موفق باشد 😉
-
شما هم دیدگاهی برای این مطلب ارسال کنیدtwiter facebook google plus instagram