تخفیف

سبد خرید

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

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

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

دانلود سورس js , css نمایش گالری تصاویر به صورت سه بعدی

تعداد دانلود:
568
تعداد بازدید:
3119
تاریخ:

هشتگ ها :

#

ایده این منبع این است: اگر من یک گالری محصولات داشته باشم، من بهترین تصویر را برای هر یک از آنها انتخاب می کنم. اما اگر یک تصویر کافی نیست چه؟ مشتری بر روی محصول کلیک می کند، او به صفحه محصول تکیه می کند، و در بیشتر موارد، یک نمایش اسلاید در آنجا پیدا می کند. با این حال، اگر آنها قبل از رفتن به صفحه محصول، تصاویر بیشتری از یک محصول مشابه را ببینند، احتمال بیشتری وجود دارد که آنها را به چیزی که واقعا میخواهند خرید بخورند. بنابراین ما کشویی CSS3 و jQuery ساخته شده برای هر یک از آیتم های گالری ایجاد کرده ایم، به طور پیش فرض پنهان شده و توسط:hoverانتخاب در دستگاه های بدون لمس و شیر بر روی دستگاه های لمسی ایجاد شده است.

درباره IE9: حتی اگر اثر 3D و لغزنده قابل مشاهده نباشد، گالری فقط کار خوبی خواهد کرد.

مطمئنا می توان سایر کاربردهای این قطعه کد را استفاده کرد. احساس آزادی کنید!

ایجاد ساختار

ساختار اصلی لیست نامحدود است. هر آیتم لیست حاوی یک لیست غیر ارادی توزیع شده است. علاوه بر فهرست نامحدود توپی (تصاویر 3+ محصول) ما نیاز به عناصر دیگر: اطلاعات محصول (عنوان و قیمت)، ناوبری (2 فلش برای حرکت بین تصاویر پیش نمایش) و ماشه اثر 3D (فقط در تلفن همراه قابل مشاهده است ، جایی که ما نمی توانیم اثر شناور را به عنوان ماشه استفاده کنیم).

<ul>
   <li>
      <ul class="cd-item-wrapper">
         <li class="cd-item-front"><a href="#0"><img src="img/thumb-1.jpg"></a></li>
         <li class="cd-item-middle"><a href="#0"><img src="img/thumb-2.jpg"></a></li>
         <li class="cd-item-back"><a href="#0"><img src="img/thumb-3.jpg"></a></li>
         <li class="cd-item-out"><a href="#0"><img src="img/thumb-4.jpg"></a></li>
         <!-- <li class="cd-item-out">...</li> -->
      </ul> <!-- cd-item-wrapper -->

      <div class="cd-item-info">
         <b><a href="#0">Product Name</a></b>
         <em>$9.99</em>
      </div> <!-- cd-item-info -->

      <nav>
         <ul class="cd-item-navigation">
            <li><a class="cd-img-replace" href="#0">Prev</a></li>
            <li><a class="cd-img-replace" href="#0">Next</a></li>
         </ul>
      </nav>

      <a class="cd-3d-trigger cd-img-replace" href="#0">Open</a>
   </li>

   <li>
      <!-- ... -->
   </li>
</ul>

افزودن سبک

برای ایجاد اثر سه بعدی از تبدیلات 3D CSS3 استفاده کردیم  . برای جلوه های سه بعدی برای کار ما باید یک مقدار چشم انداز را به عنصر والد (لیست نامحدود توشیبا) تنظیم کنیم. ما اعلام 4 کلاس برای اقلام لیست: .cd-item-front، .cd-item-middleو .cd-item-backبرای اولین بار 3 اقلام لیست، در حالی که کلاس .cd-item-outبرای تمام دیگر (و نه قابل مشاهده است) اقلام لیست استفاده می شود - در صورتی که شما می خواهید برای اضافه کردن تصاویر است.

.cd-item-wrapper {
  perspective: 500px;
  perspective-origin: 50% -30%;
}

.cd-item-wrapper li {
  position: absolute;
  top: 0;
  left: 0;
  transition: all 0.4s;
}

.cd-item-wrapper li.cd-item-front {
  position: relative;
  z-index: 3;
}

.cd-item-wrapper li.cd-item-middle {
  z-index: 2;
}

.cd-item-wrapper li.cd-item-back {
  z-index: 1;
}

.cd-item-wrapper li.cd-item-out {
  /* picture not visible - use this class in case you have more than 3 pictures per item */
  z-index: 0;
  opacity: 0;
}

توجه داشته باشید که مقدار دوم منتقل شده به اموال دید اولیه (محور Y) منفی است. به این ترتیب، هنگامی که ما موارد لیست را در امتداد محور Z فشار می دهیم، آنها در بالای آیتم لیست پیشانی قابل مشاهده هستند.

انیمیشن اثر سه بعدی

در دستگاه های بدون لمس، ماژول نمایشگر سه بعدی را به ما نشان می دهد:

.no-touch #cd-gallery-items > li:hover .cd-item-middle {
  transform: translate3d(0, 0, -20px);
  opacity: .8;
}
.no-touch #cd-gallery-items > li:hover .cd-item-back {
  transform: translate3d(0, 0, -40px);
  opacity: .4;
}

در عوض، از دستگاه های لمسی استفاده می کنیم .activeکه توسط یک ضربه روی .cd-3d-triggerتگ لنگر ایجاد می شود.

در نهایت، ما نیاز به 2 کلاس بیشتر برای رسیدگی به اثر لغزش از آیتم لیست جلو. ما از li.move-rightآیتم push استفاده می کنیم  و  li.hiddenدر پایان گذار (با کمک برخی از jQuery) پنهان می کنیم:

.cd-item-wrapper li.move-right {
  transform: translate3d(200px, 0, 0);
  opacity: 0;
  z-index: 4 !important;
}

.cd-item-wrapper li.hidden {
  /* used to hide the picture once it's pushed out - to the right */
  display: none !important;
}

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

ما دو توابع را برای کنترل ظاهر ناوبری تعریف کردیم: updateNavigation () و hideNavigation ():

function updateNavigation(navigation, container) {
   //container is the .cd-item-wrapper element
   var isNextActive = ( container.find('.cd-item-middle').length > 0 ) ? true : false,
       isPrevActive =   ( container.children('li').eq(0).hasClass('cd-item-front') ) ? false : true;
   (isNextActive) ? navigation.find('a').eq(1).addClass('visible') : navigation.find('a').eq(1).removeClass('visible');
   (isPrevActive) ? navigation.find('a').eq(0).addClass('visible') : navigation.find('a').eq(0).removeClass('visible');
}

function hideNavigation(navigation) {
   navigation.find('a').removeClass('visible');
}

در دستگاه های بدون لمس، ما از رویداد شناور برای تغییر ناوبری کشویی استفاده می کنیم؛ در دستگاه های لمسی، به جای این ما از رویداد کلیک در  .cd-3d-triggerتگ لنگر استفاده می کنیم.

هنگامی که کاربر روی ناوبری کشویی ضربه می زند، کلاس هایی که برای .cd-item-wrapper liعناصر ایجاد شده اند را ایجاد می کنیم تا اثر اسلاید 3D ایجاد شود.

var galleryNavigation = $('.cd-item-navigation a');
//change image in the slider
galleryNavigation.on('click', function(){
   var navigationAnchor = $(this),
       direction = navigationAnchor.text(),
       activeContainer = navigationAnchor.parents('nav').eq(0).siblings('.cd-item-wrapper');
   ( direction=="Next") ? showNextSlide(activeContainer) : showPreviousSlide(activeContainer);
   updateNavigation(navigationAnchor.parents('.cd-item-navigation').eq(0), activeContainer);
});
  •  
محصولات مشابه فروشی
هشتگ ها :

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

ارسال نظر

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

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

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

  • logo-samandehi