Автор

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

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


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



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

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

Изображение, которое расширяется при нажатии, переходит в полную ширину и превращается в галерею.


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

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


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

Простой слайдер с морфированием изображений предварительного просмотра, анимированных с использованием свойств SVG.


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

К данному решению пришел не сразу, способ реализации был третьим по счёту, как мне кажется, вполне достойным внимания. Основная фишка в том, что для реализации вообще не используется JavaScript.

Внимание! Метод не работает в IE8 и ниже, в нашем проекте решили не ориентироваться на эти браузеры, по крайней мере на этапе Бета.

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

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


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

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

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close