Автор

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

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


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

 

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

 

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

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

 

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

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 соответственно.

 

Вот и всё!


vk.com/club.ssdru

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


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

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

Ранее я уже писал о подобном скрипте Highlight.js в статье «Подсветка синтаксиса в примерах кода» который я использую на своем сайте, в этой статье речь пойдет о подсветке синтаксиса кода на SyntaxHighlighter, который позволяет реализовать красивую подсветку синтаксиса на любом сайте. Данный скрипт поддерживает множество языков программирования, таких как, например, PHP, C++, JavaScript, C# и многие другие. В рамках данной статьи мы подробно рассмотрим процесс установки SyntaxHighlighter на сайт, а затем перейдем к подробной инструкции по использованию скрипта.


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

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


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

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


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

И снова параллакс на jQuery, но довольно-таки интересный вариант и я думаю многие захотят на своем сайте иметь чтото подобное, так как практически это многослойный параллакс эффект, просто посмотрите демо и всё станет ясно!


105 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close