Динамическое меню
Разработка Комментариев: 0

Современное меню для сайта с анимированными переходами


Демонстрация Скачать ZIP

В своих примерах мы не показываем как подключать те или иные файлы, подразумевается, что вы знакомы с основами html

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

Сегодня мы хотели бы поделиться красивым эфектом раскрытия меню при нажатии на соответствующую кнопку. Мы создадим несколько SVG эффектов через JavaScript, что сделает возможным наложение эффектов друг на друга. Контролируя отдельные координаты каждого слоя мы создадим незабываемые анимации.

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

Внимание: Мы используем новые свойства CSS, которые работают только в современных браузерах.

Работа с кодом меню

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


  
  
  

Вот стили css, которые помогут растянуть эффект для меню на весь экран.

.shape-overlays {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0; 
  left: 0;
}

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

Скрипты и настройки

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

class ShapeOverlays {
  constructor(elm) {
    this.elm = elm; // Parent SVG element.
    this.path = elm.querySelectorAll('path');
    this.numPoints = 18; // Количество контрольных точек для кривой.
    this.duration = 600; // Продолжительность анимации одного элемента.
    this.delayPointsArray = []; // Массив кривых точек.
    this.delayPointsMax = 300; // Максимальная задержка для всех элементов.
    this.delayPerPath = 60; // Задержка анимации одного элемента.
    this.timeStart = Date.now();
    this.isOpened = false;
  }
  ...
}
const elmOverlay = document.querySelector('.shape-overlays');
const overlay = new ShapeOverlays(elmOverlay);

Другими классами которые определяют внешний вид являются ShapeOverlays.toggle() и ShapeOverlays.updatePath()

Класс ShapeOverlays.toggle () имеет функцию открытия и закрытия слоев меню, а также установки значения задержки для каждой контрольной точки, для каждого слоя при открытии и закрытии. Нет необходимости устанавливать значение задержки каждый раз, но, изменив ее, мы создадим случайный эфект, лучше поэксперементировать.

ShapeOverlays.updatePath () управляет анимацией. Например, в демо 1 для всех контрольных точек используется одна и та же функция, а значение задержки устанавливается таким образом, что мы получаем волну.

toggle() {
  const range = 4 * Math.random() + 6;
  for (var i = 0; i < this.numPoints; i++) {
    const radian = i / (this.numPoints - 1) * Math.PI;
    this.delayPointsArray[i] = (Math.sin(-radian) + Math.sin(-radian * range) + 2) / 4 * this.delayPointsMax;
  }
  ...
}

updatePath(time) {
  const points = [];
  for (var i = 0; i < this.numPoints; i++) {
    points[i] = ease.cubicInOut(Math.min(Math.max(time - this.delayPointsArray[i], 0) / this.duration, 1)) * 100
  }
  ...
}

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

Немного скриншетов из наших примеров

красивое анимированное меню красивое анимированное меню красивое анимированное меню красивое анимированное меню


Демонстрация Скачать ZIP

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

Поделиться:


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

    Selection Studio

    Поделитесь страницей в соц. сетях