Округлая анимированная навигация

Округлая анимированная навигация

От автора: Экспериментальная полноэкранная навигация, раскрывающаяся по форме окружности и анимированная с помощью CSS и jQuery.

Недавно я тестировала новое приложение Ping для iOS. Так вот эффект, который происходил при нажатии на кружок для переключения страницы, был настолько классным, что я попробовала создать нечто похожее на CSS и jQuery. Результат получился довольно впечатляющим, поэтому мы решили опубликовать пример такого эффекта на сайте CodyHouse :) Эта навигация является экспериментальной, хотя поддерживается всеми основными браузерами – мы использовали Velocity.js – и я уверена, что вы, друзья, найдете для этой навигации креативное применение!

скачать исходникидемо

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

Что касается HTML разметки, то для данной навигации мы использовали ненумерованный список, обернутый (с семантической точки зрения) в элемент nav. Элементы с классами .cd-overlay-nav и .cd-overlay-content используются для создания анимации для окружности. Точнее, они используются в качестве контейнеров для расположения кружков сразу за верхней иконкой меню, в то время как, находящиеся внутри них, элементы span являются двумя цветными кружками, которые затем увеличиваются в размерах. Наконец, элемент с классом .cd-nav-trigger является самой иконкой меню, которая превращается в иконку в виде крестика.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

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

Если вы посмотрите на CSS, то заметите, что кнопка-переключатель (триггер с классом .cd-nav-trigger) имеет свойство position:fixed с параметрами для верхнего и правого краев. Чтобы эффект работал должным образом, мы должны отцентрировать контейнеры (.cd-overlay-nav и .cd-overlay-content) двух анимированных кружков так, чтобы они находились сразу за переключателем (триггером). Для этого нам потребуется задать для них фиксированную высоту и ширину. Но если вы посмотрите на элементы span, которые и являются анимированными кружками, то вы можете заметить, что для них мы не назначили ни позиционирования, ни размеров. Поскольку кружок должен впоследствии раскрыться на весь экран, независимо от размеров области просмотра, мы задали позиционирование (параметры для верхнего и левого краев) и размеры (ширину) через jQuery.

Идея заключалась в том, чтобы создать анимацию для иконки меню, а не просо заменить «гамбургер» на «крестик», поэтому мы добавили элемент (.cd-icon) в наш переключатель. Благодаря этому мы сможем создавать (а также создавать анимацию) иконку, используя псевдо-элементы ::before и ::after.

Фоновый цвет меню/переключателя изменяется, и анимация создается с небольшой задержкой. И снова, мы используем 2 псевдо-элемента, чтобы добиться этого эффекта:

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

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

Прежде, чем мы углубимся в изучение jQuery кода, я бы хотела объяснить простыми словами, что происходит: когда пользователь кликает/нажимает на кнопку с меню, мы активируем анимацию для элемента span внутри элемента с классом .cd-overlay-nav. После того как окружность заполнит экран, мы показываем навигацию. Когда пользователь снова кликает/нажимает на переключатель для закрытия навигации, мы активируем анимацию для элемента span внутри элемента с классом .cd-overlay-content. В завершении данной анимации мы скрываем первую окружность и навигацию, которые по-прежнему остаются на месте, а не видно их, потому что у них более низкое значение для свойства z-index. Наконец, мы уменьшаем прозрачность у второй окружности (в демо-примере она желтая), показывая, таким образом, содержимое, т.е. якобы помещая содержимое поверх навигации.

Что касается jQuery, то здесь мы определяем позиционирование и размеры элементов span с кружками (используя функцию initLayer()). Мы назначаем высоту в два раза больше диагонали области просмотра и параметры для верхнего (и левого) края равные отрицательному значению диагонали области просмотра (элемент span находится внутри элемента с классом .cd-overlay-nav/.cd-overlay-content и имеет свойство position: absolute).

Когда пользователь первый раз кликает по элементу с классом .cd-nav-trigger, мы активируем анимацию для элемента span с классом .cd-overlay-nav, изменяя значение параметра scale с 0 на 1 (мы использовали Velocity.js для создания анимации):

Когда пользователь кликает по элементу с классом .cd-nav-trigger для закрытия меню, то мы уже активируем анимацию для изменения значения параметра scale у элемента span с классом .cd-overlay-content:

Автор: Claudia Romano

Источник: http://codyhouse.co/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки: , ,

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (1)

  1. Александр Синяшин

    Здрасти! А как его спрятать из виду? Хочу, чтобы он появлялся в других устройств, а не в компе.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree