• Как продвинуть сайт на первые места?
    Вы создали или только планируете создать свой сайт, но не знаете, как продвигать? Продвижение сайта – это не просто процесс, а целый комплекс мероприятий, направленных на увеличение его посещаемости и повышение его позиций в поисковых системах.
    Ускорение продвижения
    Если вам трудно попасть на первые места в поиске самостоятельно, попробуйте технологию Буст, она ускоряет продвижение в десятки раз, а первые результаты появляются уже в течение первых 7 дней. Если ни один запрос у вас не продвинется в Топ10 за месяц, то в SeoHammer за бустер вернут деньги.
    Начать продвижение сайта
  • Сервис онлайн-записи на собственном Telegram-боте
    Тот, кто работает в сфере услуг, знает — без ведения записи клиентов никуда. Мало того, что нужно видеть свое расписание, но и напоминать клиентам о визитах тоже. Нашли самый бюджетный и оптимальный вариант: сервис VisitTime.
    Для новых пользователей первый месяц бесплатно.
    Чат-бот для мастеров и специалистов, который упрощает ведение записей:
    Сам записывает клиентов и напоминает им о визите;
    Персонализирует скидки, чаевые, кэшбэк и предоплаты;
    Увеличивает доходимость и помогает больше зарабатывать;
    Начать пользоваться сервисом
анимация SVG

Интересные эффекты оверлея при появлении меню

Креативная идея для создания необычных переходов между контент-блоками на сайте. Шесть разных вариантов использования связки JS+CSS+SVG.

Что у нас сегодня

Эффекты SVG — это всегда прекрасно. А когда этим пользуется пряморукий программист + дизайнер — получаем то, что на демо. За основу взято визуальное отображение вертикального меню при клике на «гамбургер». Шесть различных анимаций появления, которые удивят Ваших пользователей. Вы легко можете использовать данные наработки в своих проектах.

пример анимации

Техническая часть

Приведем основные моменты кода. Делаем SVG:

<svg class="shape-overlays" viewBox="0 0 100 100" preserveAspectRatio="none">
  <path class="shape-overlays__path"></path>
  <path class="shape-overlays__path"></path>
  <path class="shape-overlays__path"></path>
</svg>

CSS данного селектора:

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

Стили для path-элементов:

.shape-overlays path:nth-of-type(1) { fill: #c4dbea; }
.shape-overlays path:nth-of-type(2) { fill: #4c688b; }
.shape-overlays path:nth-of-type(3) { fill: #2e496a; }

Класс JavaScript для управления параметрами:

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

Более подробную информацию можно найти в HTML-файлах, которые предоставлены автором по ссылке выше. Пробуйте. Удачи!