Автор

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

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

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


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

Формат SVG делает сайт, более интересным. Это действительно много творческих возможностей для интересных эффектов на веб-сайт с использованием SVG. Сегодня мы хотели бы поделиться с вами двумя экспериментальными понятиями, которые используют анимацию, ставших популярными благодаря анимации на PlayStation 4 и Xbox одновременно.


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

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


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

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


105 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close