Автор

30 09.2017
Полноэкранная навигация

Полноэкранная навигация


Это интро-страница, ориентированная на фоновое изображение полной ширины и жирное анимированное меню. И для браузеров, которые его поддерживают, хороший внешний вид, похожий на iOS, за навигацию.

 

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

 

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

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

 

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

Мы использовали элемент <main>, чтобы обернуть видимый контент. Навигация находится вне <main>, потому что он будет скользить сверху. Нам нужно было отделить 2 элемента для работы всей анимации. Диверс .cd-shadow-layer используется для создания тонкой тени поверх элемента <main>, когда он масштабируется, чтобы сделать 3D-эффект более реалистичным.

Для создания размытого слоя изображения используется .cd-blurred-bg. Подробнее об этом в разделе «Добавление стиля».

<main>
<section>
<h1><!-- title here --></h1>
<header>
<!-- logo and menu icon here -->
</header>
<div class="cd-blurred-bg"></div>
</section>
</main>
<div class="cd-shadow-layer"></div>
<nav>
<ul>
<li><!-- ... --></li>
</ul>
</nav>

 

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

Чтобы реализовать анимацию, мы использовали преобразования CSS3 в сочетании с переходами CSS3, применяемые к двум элементам - <main> и <nav>. Свойства перевода и масштабирования позволяют нам перемещать навигацию и имитировать 3d-движение основного содержимого (да, вы могли бы сыграть с translateZ для достижения такого же эффекта). Переходы позволяют значениям свойств плавно переключаться со статуса A на статус B.

#cd-main-content { /* this is the main element */
  transition-property: transform;
  transition-duration: 0.5s;
}
 
#cd-main-content.move-out {
  transform: scale(0.6);
}
 
#main-nav { /* this is the navigation */
  transform: translateY(-100%);
  transition-property: transform;
  transition-duration: 0.5s;
}
 
#main-nav.is-visible {
  transform: translateY(0);
}

О эффекте размытия: мы создали клон элемента <section>, с тем же фоновым изображением. Чтобы применить эффект размытия, нам нужно было маскировать часть содержимого. После некоторых исследований я нашел эту статью о Codrops о том, как работает свойство клипа. Единственная проблема: мы не знаем значения смещения сверху, это зависит от устройства. Да, нам нужен наш jQuery для передачи значений в свойство клипа. Подробнее об этом в следующем разделе.

.cd-blurred-bg {
  /* we use jQuery to apply a mask to this element - CSS clip property */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("../img/bg-img.jpg") no-repeat center center;
  background-size: cover;
  filter: blur(4px);
}

Обратите внимание

Для того, чтобы иметь полный контент страницы, независимо от размера видового экрана, нам нужно было установить height: 100% для <html> и <body>.

 

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

В jQuery мы не много работали. Единственное, что стоит отметить, это функция установки свойства клипа элемента .cd-blurred-bg.

function set_clip_property() {
	var $header_height = $('.cd-header').height(),
		$window_height = $(window).height(),
		$header_top = $window_height - $header_height,
		$window_width = $(window).width();
	$('.cd-blurred-bg').css('clip', 'rect('+$header_top+'px, '+$window_width+'px, '+$window_height+'px, 0px)');
}

 

Вот и всё!


vk.com/club.ssdru

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


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

05 04.2013
Полноэкранная навигация

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


09 12.2014
Полноэкранная навигация

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


31 03.2013
Полноэкранная навигация

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


23 04.2013
Полноэкранная навигация

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


105 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close