Автор

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

Если вы ищете, как создать активную диаграмму (или схемы) с информацией - эта новая статья для вас. Я просматривал в Интернете, и нашел одно хорошее и серьезное решение, - Highcharts библиотека. Это чистая javascript библиотека, которая предлагает интерактивные и интуитивно понятные графики. Эта библиотека поддерживает различные возможные графики: площадь, линии, сплайн, areaspline, пирог, колонны и другие. Я думаю, что это лучший способ, чтобы получить информацию для зрителей. Сегодня в демо я подготовил несколько примеров с разными графиками.


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

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


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

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


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

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

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


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

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


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

Надёжный хостинг

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

Бесплатный тестовый период, ежедневные бэкапы, неограниченный трафик, акции с бонусами... Конечно, у нас все это есть.


Перейти на хостинг

О КОМПАНИИ

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

Close

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


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

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

Close