Полно-экранное изображение и навигация

demosourse

Сегодняшний урок посвящён использованию полноэкранного фонового изображения, а так же анимированной навигации.

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

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

Весь контент страницы (кроме навигации) поместим в элемент <main>. Навигация должна находиться вне упомянутого контейнера чтобы выплывать из верхней части экрана. Элемент .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: затронем элементы <main> и <nav>. Свойства translate и scale позволят сместить навигации и эмитировать 3d движение основного контента (поиграем с свойством translateZ).

#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> с точно таким же фоновым изображением. Для применения эффекта нам потребуется применить маску к некоторым частям контента.

.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);
}

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

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

В этой части нам нужно будет задать значение свойству clip элемента .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)');
}

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: https://codyhouse.co/gem/intro-page-full-width-navigation/
Перевел: Станислав Протасевич
Урок создан: 12 Февраля 2016
Просмотров: 5051
Правила перепечатки

5 последних уроков рубрики "CSS"

^ Наверх ^