Автор

Быстрый просмотр 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);
});

 

Вот и всё!

Многие материалы на сайте взяты из блогов: "Все для веб-дизайнера Rudebox", "A free library of HTML, CSS, JS nuggets Codyhouse" - полностью переведен и представлен в ознакомительных целях!

vk.com/club.ssdru

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



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

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

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


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

Простой шаблон портфолио с изображениями предварительного просмотра проекта, которые выдвигаются, чтобы показать выбранный проект.


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

В передыдущем уроке «Интересные кнопки поделиться в соцсетях на CSS3» я уже писал как можно сделать красивые кнопки для соцсетей. Продолжая эту тему хочу поделиться еще одним примером как можно оформить свой сайт! В данном примере используется только CSS и не каких скриптов!


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

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


75 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close