Автор

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

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


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


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

Как установить кнопки социальных сетей для своего сайта или как добавить блок с кнопками социальных сетей — тема данного урока. Я постараюсь дать вам информацию о самых популярных способах размещения кнопок.

Размещение кнопок социальных сетей на сайте при помощи официальных виджетов:

Кнопка Вконтакте- Мне нравится
Кнопка FaceBook — Like
Кнопка Twitter — Твитнуть
Кнопка Одноклассники — Класс
Кнопка Google — Plus 1


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

Отображение информации на странице в виде jQuery вкладок.


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

В данном уроке мы создадим интересные визуальные 3D эффекты с помощью CSS3 и jQuery. Идея для урока возникла под впечатлением страниц демонстрации проектов Google SketchUp.

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


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

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


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

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

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close