Вращающаяся навигация

Создание динамичных и запоминающихся интерфейсов — ключ к удержанию внимания пользователя. Одним из таких эффектов является вращающася навигация, которая буквально «поворачивает» основную страницу, открывая пространство для меню.

Реализовать такой непростой эффект с чистым JavaScript может быть трудоемко. Однако с фреймворком Vue.js эта задача становится невероятно простой. Реактивная природа Vue позволяет легко управлять переходами и состояниями, связывая клик по кнопке с плавной трансформацией всей сцены.

Почему именно Vue для таких компонентов?

Реактивность: Изменение одного состояния автоматически применяет нужные CSS-классы и анимации ко всем связанным элементам.

Простота: Логика открытия/закрытия инкапсулирована в компоненте, что делает код чистым и поддерживаемым.

Производительность: Vue эффективно обновляет DOM, обеспечивая плавность анимаций.

Этот пример — прямое доказательство того, что Vue.js идеально подходит для создания сложных интерактивных интерфейсов, таких как вращающееся меню, превращая рутину в творческий и результативный процесс.

<div id="app">
  <div class="app-page" :class="{'app-page--rotated': isShown}">

    <!-- Здесь содержание страницы -->

  </div>
  <div class="app-burger" :class="{'app-burger--rotated': isShown}">
    <button class="icon-burger" data-app="burger" @click.prevent="showMenu"></button>
    <button class="icon-close" data-app="close" @click.prevent="hideMenu"></button>
  </div>
  <nav class="app-menu">
    <a v-for="item in menu" :key="item.text" href="#" class="app-menu__item" :class="{move: isShown}">
      <span :class="`icon-${item.class}`"></span>
      <span class="app-menu__text">{{ item.text }}</span>
    </a>
  </nav>
</div>

#app {  
  --tr: .5s ease-in-out;
  overflow: hidden;
  position: relative;
  background-image: linear-gradient(black, #666);  
}
.app-page {
  width: 100%;
  margin-inline: auto;
  padding-bottom: 100px;
  background-color: #F2F3F4;
  transform-origin: left top;
  transition: transform var(--tr);
}

/* -- Здесь стили для элементов содержания страницы -- */

.app-page--rotated {
  transform: rotate(-20deg);
}
.app-burger {
  --size: 200px;
  position: absolute;
  left: calc(-1 * var(--size) / 2);
  top: calc(-1 * var(--size) / 2);
  width: var(--size);
  height: var(--size);
  color: #fff;
  background-color: #E74C3C;
  font-size: 32px;
  border-radius: 100vw;
  transform-origin: center;
  transition: transform var(--tr);
}
.app-burger--rotated {
  transform: rotate(-90deg);
}
[data-app=burger] {
  position: absolute;
  right: 20%;
  bottom: 20%;
  color: #fff;
  font-size: 24px;
}
[data-app=close] {
  position: absolute;
  right: 65%;
  bottom: 20%;
  color: #fff;
  font-size: 24px;
}
.app-menu {
  position: absolute;
  left: 30px;
  bottom: 10vh;
  display: flex;
  flex-direction: column;
  gap: 30px 0;
}
.app-menu__item {
  display: flex;
  align-items: center;
  gap: 0 10px;
  text-decoration: none;
  transform: translateX(-200px);
  transition: transform var(--tr) 0s;
}
.app-menu__item.move {
  transform: translateX(0px);
  transition: transform var(--tr) 0.25s;
}
.app-menu span {
  color: #fff;
  font-size: 24px;
}
.app-menu__text {  
  font-size: 16px !important;
  font-weight: 500;
  text-transform: uppercase;
}

const MENU = [
    {text: 'Дом',class: 'home'},
    {text: 'О нас',class: 'user'},
    {text: 'Контакты',class: 'mail'},
]
const {createApp,ref} = Vue
createApp({
    setup() {    
        let isShown = ref(false)
		const menu = ref(MENU)
        function showMenu() {
			return isShown.value = true
		}
		function hideMenu() {
			return isShown.value = false
		}
        return {isShown, menu, hideMenu, showMenu}
    }        
}).mount('#app')

Внимание! Представленный код — это готовый компонент, но для его работы на странице должен быть установлен и подключен фреймворк Vue. Если вы начинающий разработчик, просто добавьте строку
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
в раздел <head> вашего HTML, и всё заработает.

Как работает это Vue-меню с вращающейся анимацией?

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

HTML (Шаблон компонента)

В шаблоне мы используем несколько ключевых Vue-директив для создания интерактивности:

:class="{'app-page--rotated': isShown}" – Динамически добавляет CSS-класс app-page--rotated только когда меню открыто. Это запускает анимацию поворота всей страницы.
:class="{'app-burger--rotated': isShown}" – Аналогично поворачивает круглую кнопку-бургер на -90 градусов при открытии меню.
@click.prevent="showMenu" и @click.prevent="hideMenu" – Обрабатывают клики пользователя по кнопкам бургера и закрытия, предотвращая стандартное поведение браузера.
v-for="item in menu" – Динамически отрисовывает пункты меню из массива menu, создавая навигационные ссылки.
:class="{move: isShown}" – Добавляет класс move к пунктам меню когда они должны выезжать из-за края экрана.

CSS (Стилизация и анимация)

Стили обеспечивают плавные переходы и визуальные эффекты:

Контейнеры используют transform-origin для задания точки вращения и transition: transform var(--tr) для плавной анимации.
Класс .app-page--rotated применяет transform: rotate(-20deg), заставляя основную страницу «отъезжать» вправо.
Класс .app-burger--rotated поворачивает красный круг с кнопками на -90 градусов, сохраняя ориентацию иконок.
Класс .move убирает transform: translateX(-200px), позволяя пунктам меню плавно выезжать из-за левого края с задержкой transition-delay: 0.25s для эффекта последовательного появления.

JS (Логика на Vue 3 Composition API)

Логика компонента проста и сосредоточена в одном месте:

Состояние: Мы используем реактивную ссылку let isShown = ref(false), которая отслеживает открыто ли меню, и const menu = ref(MENU), содержащую массив пунктов навигации.
Метод showMenu: При клике на бургер-кнопку устанавливает isShown.value = true, что активирует все связанные CSS-классы.
Метод hideMenu: При клике на крестик устанавливает isShown.value = false, возвращая интерфейс в исходное состояние.
Реактивность Vue: Как только значение isShown меняется, Vue автоматически реагирует на это изменение и перерисовывает DOM, применяя или убирая CSS-классы. Это приводит к синхронизированной анимации поворота страницы, вращения кнопки и выезда меню без необходимости писать дополнительный код для управления стилями.

Вдохновились этой анимацией? ✨

Такие же креативные и динамичные элементы могут оживить и ваш сайт! Мы создаем сайты и уникальные интерактивные компоненты, которые:

Привлекают внимание посетителей
Подчеркивают современность вашего бренда
Запоминаются надолго

Готовы выделиться? 🚀

Закажите собственный креативный компонент — мы превратим вашу идею во впечатляющий цифровой опыт!

Предыдущий Следующий