ملت وب مرجع دانلود قالب وردپرس فارسی و قالب فارسی وردپرس و قالب html و افزونه وردپرس
24
ساعت با شما

04144235034

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

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

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

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

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

ایده این منبع این است: اگر من یک گالری محصولات داشته باشم، من بهترین تصویر را برای هر یک از آنها انتخاب می کنم. اما اگر یک تصویر کافی نیست چه؟ مشتری بر روی محصول کلیک می کند، او به صفحه محصول تکیه می کند، و در بیشتر موارد، یک نمایش اسلاید در آنجا پیدا می کند. با این حال، اگر آنها قبل از رفتن به صفحه محصول، تصاویر بیشتری از یک محصول مشابه را ببینند، احتمال بیشتری وجود دارد که آنها را به چیزی که واقعا میخواهند خرید بخورند. بنابراین ما کشویی 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);
});
  •  
حميد  شریفی
نویسنده
حميد شریفی
تعداد بازدید: 535
تعداد دانلود : 110
تاریخ 1397-3-29
کانال تلگرامی ما تا 50% تخفیف دریافت کنید
مطالبی که شاید خوشتان بیاد