Автор

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

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

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


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

В уроке речь пойдет о простых, но необычных эффектах при наведении на миниатюры изображений реализованных с помощью только CSS3 - основой будут css3 transitions.

Не устаю напоминать, что результаты данного урока будут работать только в современных поддерживающих CSS3 браузерах, таких как Chrome, Firefox, Safari. Идея урока состоит в том, чтобы создать необычную круглую миниатюру, которая будет анимироваться при наведении на неё курсора.


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

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


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

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


105 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close