Автор

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

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

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


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

Коллекция анимированных заголовков со сменными словами, которые заменяют друг друга с помощью CSS-переходов.


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

Анимация с поддержкой CSS, которая заменяет обновление страницы при обновлении контента с помощью jQuery.


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

Прогресс веб-дизайна не стоит на месте,большие гиганты ит-индустрии диктуют нам правила и направления в разработке дизайна, совсем недавно все стали переводить свои дизайны в минимализм, а именно в тренд Metro UI, объемные сайты постепенно стали исчезать ведь им производят рестайлинг, в скором времени будем на них любоваться как на динозавров. Буквально за несколько недель, с момента показа новой iOS 7, произошел легкий сдвиг в сознании не только у дизайнеров, но и у пользователей, имя ему — плоский дизайн.


105 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close