Автор

11 09.2017
3D-навигация

3D-навигация


Смелая навигация, слайд-шоу, когда активна, заменяет текущий контент в трехмерном пространстве.

 

ДЕМО
ИСХОДНИКИ

 

Сегодняшний ресурс - это сильный подход к показу навигации по сайту. Однако имейте в виду, что это не должно быть «основной» навигацией. Например, вы могли бы иметь галерею продуктов, и вы хотели бы создать плавный переход при переходе из одной категории продукта в другую.

Чтобы увеличить фокус на меню, мы нажали основное содержимое вдоль оси z (с помощью преобразований CSS мы фактически уменьшаем размер содержимого, мы не используем 3D-переводы, но результат тот же).

Интересное решение:

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

Теперь давайте погрузимся в код!

 

Создание структуры

HTML структурирован в 3 основных элемента: .cd-nav-trigger, используемый для создания значка меню, элемент .cd-section, содержащий основное содержимое страницы и .cd-nav-container для основной навигации.

<a href="#cd-nav" class="cd-nav-trigger">
Menu<span><!-- used to create the menu icon --></span>
</a> <!-- .cd-nav-trigger -->

<main>
<section class="cd-section index cd-selected">
<header>
<div class="cd-title">
<h2><!-- title here --></h2>
<p><!-- brief description here --></p>
</div> <!-- .cd-title -->
</header>

<div class="cd-content">
<!-- your content here -->
</div>
</section> <!-- .cd-section -->
</main>

<nav class="cd-nav-container" id="cd-nav">
<header>
<h3>Navigation</h3>
<a href="#0" class="cd-close-nav">Close</a>
</header>

<ul class="cd-nav">
<li class="cd-selected" data-menu="index">
<a href="index.html">
<span>
<!-- svg icon here -->
</span>

<em><!-- title here --></em>
</a>
</li>

<li data-menu="projects">
<!-- .... -->
</li>

<!-- other list items here -->
</ul> <!-- .cd-3d-nav -->
</nav>

Для создания теневого слоя используется дополнительный div.cd-overlay, видимый только при активной навигации.

 

Добавление стиля

Чтобы реализовать нашу анимацию, мы использовали CSS3 Transformations, применяемые к элементам <main> и <nav>.
По умолчанию навигация имеет фиксированную позицию и переведена вправо, за пределы области просмотра (translateX(100%)). Когда пользователь нажимает значок меню, класс .is-visible добавляется к элементу <nav>, который перемещается обратно в окно просмотра (translateX(0)), а класс .scale-down добавляется в элемент <main> уменьшить масштаб (scale(.9)). И, конечно же, мы использовали CSS3 Transitions для достижения плавной анимации!

.cd-nav-container {
  position: fixed;
  top: 0;
  right: 0;
  width: 80%;
  height: 100%;
  transform: translateX(100%);
  transition: transform 0.4s;
}
.cd-nav-container.is-visible {
  transform: translateX(0);
}
 
main {
  transition: transform 0.4s;
}
main.scale-down {
  transform: scale(0.9);
}

Когда пользователь выбирает элемент из навигации, создается новый элемент .cd-section и добавляется в DOM (более подробная информация содержится в разделе «Обработка событий»).

Затем выбранному классу .cd-selected присваивается этот новый вставленный элемент .cd-section, в то время как он удаляется из старого .cd-section (содержимое, которое первоначально отображается на странице). Таким образом, новый элемент раздела (который первоначально переведен вправо, вне области просмотра) перемещается назад (translateX(0)), покрывая старый контент (z-index: 2).

Одна заметка: во время этой анимации вы не видите, что старый раздел перемещается вправо (translateX(100%)), потому что мы устанавливаем задержку перехода .cd-section при преобразованиях (он будет двигаться после 0,4 с).

.cd-section {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0s 0.4s;
}
.cd-section.cd-selected {
  position: relative;
  z-index: 2;
  transform: translateX(0);
  transition: transform 0.4s 0s;
}

 

Обработка событий

Файл index.html содержит только содержимое «Intro». Для каждого раздела (projects.html, careers.html, ..) был создан другой html-файл с точно такой же структурой, но с другим содержимым .cd-section.
Когда пользователь выбирает новый элемент из навигации, создается новый элемент <section> и вставляется в функцию DOM loadNewContent.
Функция load() затем используется для загрузки содержимого конкретного раздела (мы использовали атрибут data-menu, назначенный элементу списка навигации, чтобы определить загружаемый файл).
Когда новое содержимое html будет вставлено, мы назначим выбранный класс .cd-selected и закроем навигацию.

$('.cd-nav li').on('click', function(event){
	event.preventDefault();
	var target = $(this),
		//detect which section user has chosen
		sectionTarget = target.data('menu');
	if( !target.hasClass('cd-selected') ) {
		//if user has selected a section different from the one alredy visible
		//update the navigation -> assign the .cd-selected class to the selected item
		target.addClass('cd-selected').siblings('.cd-selected').removeClass('cd-selected');
		//load the new section
		loadNewContent(sectionTarget);
	} else {
		// otherwise close navigation
		toggleNav(false);
	}
});
function loadNewContent(newSection) {
	//create a new section element and insert it into the DOM
	var section = $('
').appendTo($('main')); //load the new content from the proper html file section.load(newSection+'.html .cd-section > *', function(event){ //add the .cd-selected to the new section element -> it will cover the old one section.addClass('cd-selected').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){ //close navigation toggleNav(false); }); section.prev('.cd-selected').removeClass('cd-selected'); }); $('main').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){ //once the navigation is closed, remove the old section from the DOM section.prev('.cd-section').remove(); }); if( $('.no-csstransitions').length > 0 ) { //detect if browser supports transitions toggleNav(false); section.prev('.cd-section').remove(); } }

Одно важное замечание:

Мы выполнили простую функцию load(), чтобы загрузить новый html-контент, но вы можете заменить его правильным вызовом $ .ajax, чтобы правильно обрабатывать ошибки, запрос Отправить и т. д. В соответствии с вашим проектом.

 

Вот и всё!


vk.com/club.ssdru

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


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

18 03.2013
3D-навигация

Отображение информации на странице в виде jQuery вкладок.


19 03.2013
3D-навигация

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

Что мы ожидаем от jQuery таймера? Сегодня мы будем создавать jQuery плагин для отображения обратного отсчета времени. Он будет показывать оставшиеся дни, часы, минуты и секунды до начала события. Что же, начнем…


28 11.2014
3D-навигация

Бывают такие ситуации, когда необходимо реализовать достаточно простые эффекты, но из-за упущенных элементарных знаний возникают сложности. Так мы сегодня решили Вам рассказать и показать процесс реализации простого hover-эффекта для изображений с эффектом параллакса. Идея достаточно проста и банальна, у нас есть изображение, которое мы помещаем в рамку и скрываем края, при наведении курсора мыши изображение будет оживать и следовать за курсором, что придаст эффект «живого» изображения для ваших картинок.


21 04.2013
3D-навигация

Сегодня мы рассмотрим еще один вариант слайдеров для сайта, все это имеет вид автоматического аккордеона с возможностью подписи изображений, а так же с возможностью выбора и нумерации слайда. Для всего этого мы будем использовать liteAccordion - небольшой плагин jQuery для быстрого создания горизонтального аккордеона. Он имеет размер ~1.4kb (в минимизированном варианте) и может выводить любые элементы HTML (изображения, тексты, видео, Flash..). Давайте посмотрим какой все это имеет вид..


105 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close