Автор

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

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


Простая 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);
});

 

Вот и всё!


vk.com/club.ssdru

Подписывайтесь на нашу группу в контакте vk.com/club.ssdru


Статьи по темеjQuery

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

Сайт состоит с множества информации, это известно всем, но ее необходимо организовывать, чтобы ее можно было читать, при этом визуально не загромождало сайт, есть множество вариантов решения данной проблемы, один из простых вариантов это создание аккордеона, в котором информация по умолчанию скрыта, а при нажатии на пункт, происходит разворот элемент, это практично. В данном уроке мы рассмотрим как создать простой вертикальный аккордеон с помощью css.


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

В этой статье мы рассмотрим, как установить систему интервалов в CSS и как использовать относительные единицы для реагирования.


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

Хорошо спроектированный фильтр - это мощный инструмент, которым могут воспользоваться пользователи. На самом деле это важная функция, если на вашем сайте (интернет-магазине) есть много товара, распределенного по разным категориям.


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

Красивое оформление изображений на сайте поможет пользователю быстрее найти необходимую информацию, но если оформить галерею картинок еще и достаточно привлекательно, то это заворожит взор пользователя. В данном уроке мы рассмотрим как создать отличную трехмерную галерею для сайта, которую, также, можно использовать в качестве главного ротатора контента на ресурсе. Осуществим мы это с помощью трансформаций css3. Основная идея заключается в круглой галерее, в центре которой у нас будет изображение, а также еще два изображения по бокам.


105 Публикаций

Раскрутка в соцсетях

В данном блоге описано где и как сделать накрутку групп, сообществ и личных страничек в популярных социальных сетях и тест платных сайтов занимающихся накруткой.


Перейти в Блог

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

Верстальщик с большим опытом работы. Занимаюсь созданием сайтов с 2005 года. Постоянно обучаюсь и совершенствую свои навыки. Веду свои проекты, в том числе и данный блог.

Close