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

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

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

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

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

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

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

<header>
    <a class="cd-logo" href="#0"><img src="img/cd-logo.svg" alt="Logo"></a>
</header>
 
<nav>
    <ul class="cd-primary-nav">
        <li><a href="#0">The team</a></li>
        <li><a href="#0">Our services</a></li>
        <li><a href="#0">Our projects</a></li>
        <li><a href="#0">Start a project</a></li>
        <li><a href="#0">Join In</a></li>
        <li><a href="#0">Create an account</a></li>
    </ul>
</nav>
 
<main class="cd-content">
    <!-- здесь размещается ваш контент -->
</main> 
 
<div class="cd-overlay-nav">
    <span></span>
</div> <!-- cd-overlay-nav -->
 
<div class="cd-overlay-content">
    <span></span>
</div> <!-- cd-overlay-content -->
 
<a href="#0" class="cd-nav-trigger">Menu<span class="cd-icon"></span></a>

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

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

.cd-nav-trigger {
    top: 18px;
    right: 5%;
    height: 44px;
    width: 44px;
    z-index: 5;
    /* замена изображения */
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
}
 
.cd-overlay-nav, .cd-overlay-content {
    /* контейнеры для 2 основных округлых фонов – эти контейнеры используются, чтобы расположить округлые фоны прямо за иконкой меню */
    position: fixed;
    top: 18px;
    right: 5%;
    height: 4px;
    width: 4px;
    transform: translateX(-20px) translateY(20px);
}
 
.cd-overlay-nav span, .cd-overlay-content span {
    display: inline-block;
    position: absolute;
    border-radius: 50%;
    will-change: transform;
    transform: scale(0);
}

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

.cd-nav-trigger .cd-icon {
    /* иконка, созданная в CSS */
    position: absolute;
    left: 50%;
    top: 50%;
    bottom: auto;
    right: auto;
    transform: translateX(-50%) translateY(-50%);
    display: inline-block;
    width: 18px;
    height: 3px;
    background-color: #ffffff;
    z-index: 10;
}
 
.cd-nav-trigger .cd-icon::before, .cd-nav-trigger .cd-icon:after {
    /* верхняя и нижняя линии у иконки меню */
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-color: inherit;
    transition: transform .3s;
}
 
.cd-nav-trigger .cd-icon::before {
    transform: translateY(-6px) rotate(0deg);
}
 
.cd-nav-trigger .cd-icon::after {
  transform: translateY(6px) rotate(0deg);
}
 
.cd-nav-trigger.close-nav .cd-icon {
  /* пользователь нажимает на элемент с классом .cd-nav-trigger – иконка меняется */
  background-color: rgba(255, 255, 255, 0);
}
 
.cd-nav-trigger.close-nav .cd-icon::before, .cd-nav-trigger.close-nav .cd-icon::after {
  background-color: white;
}
 
.cd-nav-trigger.close-nav .cd-icon::before {
  transform: translateY(0) rotate(45deg);
}
 
.cd-nav-trigger.close-nav .cd-icon::after {
  transform: translateY(0) rotate(-45deg);
}

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

.cd-nav-trigger::before, .cd-nav-trigger::after {
  /* 2 округлых цветных фона для иконки меню */
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 50%;
  height: 100%;
  width: 100%;
  transition-property: transform;
}
.cd-nav-trigger::before {
  background-color: #091d23;
  transform: scale(1);
  transition-duration: 0.3s;
  transition-delay: 0.4s;
}
.cd-nav-trigger::after {
  background-color: #ffb441;
  transform: scale(0);
  transition-duration: 0s;
  transition-delay: 0s;
}
.cd-nav-trigger.close-nav::before {
  /* пользователь нажимает на элемент с классом .cd-nav-trigger – 1й округлый фон исчезает */
  transform: scale(0);
}
.cd-nav-trigger.close-nav::after {
  /* пользователь нажимает на элемент с классом .cd-nav-trigger – 2й округлый фон исчезает */
  transform: scale(1);
  transition-duration: 0.3s;
  transition-delay: 0.4s;
}

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

Прежде, чем мы углубимся в изучение 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 для создания анимации):

var overlayNav = $('.cd-overlay-nav'),
    toggleNav = $('.cd-nav-trigger'),
    navigation = $('.cd-primary-nav');
 
toggleNav.on('click', function(){
    if(!toggleNav.hasClass('close-nav')) {
        //анимированное превращение иконки меню в иконку в виде крестика
        toggleNav.addClass('close-nav');
        //создание анимации для слоя с навигацией
        overlayNav.children('span').velocity({
            translateZ: 0,
            scaleX: 1,
            scaleY: 1,
        }, 500, 'easeInCubic', function(){
            //показываем навигацию
            navigation.addClass('fade-in');
        });
    }
}

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

var overlayNav = $('.cd-overlay-nav'),
    overlayContent = $('.cd-overlay-content'),
    toggleNav = $('.cd-nav-trigger'),
    navigation = $('.cd-primary-nav');
 
toggleNav.on('click', function(){
    if(!toggleNav.hasClass('close-nav')) {
        //это означает, что навигацию еще не видно – открываем ее и создаем анимацию для слоя с навигацией
        //....
    } else {
        //анимированное превращение иконки в виде крестика в иконку меню
        toggleNav.removeClass('close-nav');
        //анимация для слоя с содержимымr
        overlayContent.children('span').velocity({
            translateZ: 0,
            scaleX: 1,
            scaleY: 1,
        }, 500, 'easeInCubic', function(){
            //скрываем навигацию
            navigation.removeClass('fade-in');
            //устанавливаем значение параметра scale для слоя с навигацией на 0
            overlayNav.children('span').velocity({
                translateZ: 0,
                scaleX: 0,
                scaleY: 0,
            }, 0);
            //уменьшаем прозрачность слоя с содержимым с классом is-hidden
            overlayContent.addClass('is-hidden').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){
                //ожидает завершения перехода и выставляем значение параметра scale для слоя с содержимым на 0
                overlayContent.children('span').velocity({
                    translateZ: 0,
                    scaleX: 0,
                    scaleY: 0,
                }, 0, function(){overlayContent.removeClass('is-hidden')});
 
            });
        });
    }
});

Автор: Claudia Romano

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

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

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

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

Получить

Метки: , ,

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

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

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

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

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

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

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

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

Я не робот.

Spam Protection by WP-SpamFree