Быстрый просмотр 3D-объектов на CSS3 и jQuery

Простая 3D-анимация для ваших элементов галереи, чтобы пользователи могли легко узнать больше о ваших продуктах, не покидая страницу.

 

ДЕМО

ИСХОДНИКИ

 

Идея этого ресурса такова: если у меня есть галерея продуктов, я собираюсь выбрать лучшее изображение для каждого из них. Но что, если одного изображения недостаточно? Клиент нажимает на продукт, он переходит на страницу одного продукта, и в большинстве случаев они найдут там слайд-шоу. Однако, если бы они могли видеть больше изображений одного и того же продукта, прежде чем переходить на страницу продукта, было бы больше шансов привлечь их к тому, что они действительно хотят купить. Таким образом, мы создали слайдер CSS3 и jQuery для каждого элемента галереи, скрытый по умолчанию и запускаемый селектором hover на устройствах без касания и касанием на сенсорных устройствах.

Конечно, для этого фрагмента кода могут быть другие варианты использования. Не стесняйтесь экспериментировать!

 

Обработка событий

Основная структура - неупорядоченный список. Каждый элемент списка содержит вложенный неупорядоченный список. В дополнение к вложенному неупорядоченному списку (изображения продукта 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-эффект, мы использовали 3D-преобразования CSS3. Чтобы 3D-эффекты работали, нам нужно установить перспективное значение родительскому элементу (вложенному неупорядоченному списку). Мы объявили 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;
}

На устройствах без касания, чтобы вызвать 3D-эффект, нам нужен только селектор hover:

.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 для выталкивания элемента и 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');
}

На устройствах без касания мы используем событие hover для переключения видимости навигации ползунка; На сенсорных устройствах вместо этого мы используем событие click на тэге привязки .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);
});

 

Вот и всё!

---