Автор

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

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


Полностраничное меню, которое заменяет текущий контент, вытесняя его с экрана.

 

ДЕМО
ИСХОДНИКИ

 

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

Вот быстрый прототип конечного эффекта, который мы собрали вместе:

 

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

HTML структурирован в 3 основных элемента: <main> - содержащий видимый контент, div.cd-nav - обертывание навигации и кнопка действия .cd-nav-trigger.

.cd-nav состоит из двух элементов div.cd-half-block, первый из которых содержит навигацию (.cd-primary-nav), а второй - контактную информацию (.cd-contact-info).

<div id="cd-nav" class="cd-nav">
<div class="cd-navigation-wrapper">
<div class="cd-half-block">
<h2>Navigation</h2>

<nav>
<ul class="cd-primary-nav">
<li><a href="#0" class="selected">The team</a></li>
<!-- list items here -->
</ul>
</nav>
</div><!-- .cd-half-block -->

<div class="cd-half-block">
<address>
<ul class="cd-contact-info">
<li><a href="mailto:info@myemail.co">info@myemail.co</a></li>
<!-- other contact info here -->
</ul>
</address>
</div> <!-- .cd-half-block -->
</div> <!-- .cd-navigation-wrapper -->
</div> <!-- .cd-nav -->

Триггер .cd-nav содержит значок span.cd-nav-icon, который используется для создания значка гамбургера (сам элемент является центральной линией, а его псевдоэлементы :: after и :: before используются для создания Верхняя и нижняя линии) и элемент svg, который используется для создания круга загрузки.

<a href="#cd-nav" class="cd-nav-trigger">Menu 
<span class="cd-nav-icon"></span>

<svg x="0px" y="0px" width="54px" height="54px" viewBox="0 0 54 54">
<circle fill="transparent" stroke="#66788f" stroke-width="1" cx="27" cy="27" r="25" stroke-dasharray="157 157" stroke-dashoffset="157"></circle>
</svg>
</a>

 

Добавление стиля

Когда пользователь нажимает кнопку .cd-nav-trigger, в тело добавляется класс .navigation-is-open: этот класс запускает анимацию значка гамбургера и вход в меню.

Что касается значка гамбургер, анимацию можно разделить на 3 части:

  1. Преобразование значка гамбургера в стрелку: .cd-nav-icon ::after и .cd-nav-icon::before того, как псевдоэлементы будут повернуты на 45 / -45deg (используя в качестве начала координат правый край Элемента), и их ширина уменьшается до 50%;
  2. Поворот всего .cd-nav-icon (180deg);
  3. Эффект загрузки окружности: значение stroke-dashoffset элемента circle установлено равным нулю (изначально у него есть stroke-dasharray = "157 157" и stroke-dashoffset = "157", где 157 - значение окружности).

CSS3 Переходы были использованы для сглаживания шагов анимации.

Вот быстрая анимация, показывающая весь процесс:

.cd-nav-trigger {
transition: transform 0.5s;
}
.navigation-is-open .cd-nav-trigger {
/* rotate trigger when navigation becomes visible */
transform: rotate(180deg);
}
.cd-nav-trigger .cd-nav-icon::before,
.cd-nav-trigger .cd-nav-icon:after {
/* upper and lower lines of the menu icon */
width: 100%;
height: 100%;
transition: transform 0.5s, width 0.5s, top 0.3s;
}
.cd-nav-trigger .cd-nav-icon::before {
transform-origin: right top;
transform: translateY(-6px);
}
.cd-nav-trigger .cd-nav-icon::after {
transform-origin: right bottom;
transform: translateY(6px);
}
.navigation-is-open .cd-nav-trigger .cd-nav-icon::after,
.navigation-is-open .cd-nav-trigger .cd-nav-icon::before {
/* animate arrow --> from hamburger to arrow */
width: 50%;
transition: transform 0.5s, width 0.5s;
}
.navigation-is-open .cd-nav-trigger .cd-nav-icon::before {
transform: rotate(45deg);
}
.navigation-is-open .cd-nav-trigger .cd-nav-icon::after {
transform: rotate(-45deg);
}
.cd-nav-trigger circle {
/* circle border animation */
transition: stroke-dashoffset 0.4s 0s;
}
.navigation-is-open .cd-nav-trigger circle {
stroke-dashoffset: 0;
transition: stroke-dashoffset 0.4s 0.3s;
}

Для эффекта входа в меню элементы <main> и .cd-navigation-wrapper переведены (по оси X) на 100%. Чтобы создать более реалистичный эффект нажатия, мы использовали кубическую кривую Безье в качестве временной функции перехода. Эта кривая позволяет вам установить 4 параметра (контрольные точки кривой), чтобы создать оптимальную кривую ускорения для свойства, которое изменяется во время вашего перехода.

Есть инструменты (например cubic-bezier.com), который позволяет вам настроить свою кривую и предварительно просмотреть эффект, прежде чем использовать его в свой код (вы также можете легко экспортировать параметры окончательной кривой).

Ниже приведена быстрая анимация, которая покажет вам разницу между пользовательскими функциями кубического безье и линейной:

 

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

Мы использовали jQuery для прослушивания события click на .cd-nav-trigger и добавлении / удалении класса .navigation-is-open соответственно.

 

Вот и всё!

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

vk.com/club.ssdru

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



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

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

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


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

Библиотека WebGL позволяет создавать в браузере удивительные 3D игры, сцены и эффекты. Пока большинство из них только для развлечений, но некоторые могут быть уже сегодня использоваться на динамичных сайтах. Сегодня мы бы хотели привести пример реализации эффекта воды, который не оставит Вас равнодушным. Впечатляет, что так просто можно реализовать объемную графику прямо в окне браузера. Кроме этого данная технология стремительно набирает обороты и пользуется популярностью в веб-дизайнеров. Советуем Вам присмотреться к данной технологии.


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

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


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

Порой на сайте хочется скачать изображения, нажав при этом правой кнопкой мыши на изображение, но не всегда скачанное изображение будет необходимого качества и размера. На многих сайтах содержится специальная страница с изображениями логотипа в высоком разрешении , но такие страницы бывает очень непросто найти. По этому предлагаем просмотреть урок, как создать красивый вариант загрузок изображений, средствами jQuery мы создадим модальное окно с предложениями загрузки разных вариантов изображений.


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

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


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

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

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close