Автор

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, чтобы правильно обрабатывать ошибки, запрос Отправить и т. д. В соответствии с вашим проектом.

 

Вот и всё!

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

vk.com/club.ssdru

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



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

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

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


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

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


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

Небольшой скрипт автоматически изменит год в нижней части (футере) вашего сайта. Не нужно каждый год менять его в шаблоне сайта — обновится сам, в зависимости от настроек посетителя.


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

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


105 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close