Автор

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

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


Это интро-страница, ориентированная на фоновое изображение полной ширины и жирное анимированное меню. И для браузеров, которые его поддерживают, хороший внешний вид, похожий на 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)');
}

 

Вот и всё!

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

vk.com/club.ssdru

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



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

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

Рассмотрим оригинальную форму обратной саязи на jQuery. Такая форма легко украсит любой сайт.


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

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


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

Эффект погружения, основанный на масках изображений и CSS-преобразованиях.


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

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


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

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


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

Надёжный хостинг

С нами хостинг удобен и прост, как диван у вас дома. Вы с комфортом размещаетесь, а все внутренние пружины мы берем на себя.

Бесплатный тестовый период, ежедневные бэкапы, неограниченный трафик, акции с бонусами... Конечно, у нас все это есть.


Перейти на хостинг

О КОМПАНИИ

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

Close

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


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

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

Close