Автор

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

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

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


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

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


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

Эта ссылка «Back to top» позволяет пользователям плавно перемещаться вверх по странице. Это небольшая деталь, которая улучшает навигацию на веб-сайте с длинными страницами.


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

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


105 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close