Простая 3D-анимация для ваших элементов галереи, чтобы пользователи могли легко узнать больше о ваших продуктах, не покидая страницу.
Идея этого ресурса такова: если у меня есть галерея продуктов, я собираюсь выбрать лучшее изображение для каждого из них. Но что, если одного изображения недостаточно? Клиент нажимает на продукт, он переходит на страницу одного продукта, и в большинстве случаев они найдут там слайд-шоу. Однако, если бы они могли видеть больше изображений одного и того же продукта, прежде чем переходить на страницу продукта, было бы больше шансов привлечь их к тому, что они действительно хотят купить. Таким образом, мы создали слайдер 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-эффект, мы использовали 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;
}
Обратите внимание:
Второе значение, переданное в свойство перспективы-начала (ось Y), отрицательно. Таким образом, когда мы нажимаем элементы списка вдоль оси Z, они видны поверх элемента лобового списка.
На устройствах без касания, чтобы вызвать 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);
});