Анимация подсветки

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

Настройка подсветки через опции Driver.js

При создании нового экземпляра Driver можно указать глобальные параметры подсветки:

const driver = new Driver({
    animate: true,           // Включение анимации подсветки
    opacity: 0.75,           // Прозрачность затемнения фона
    padding: 10,             // Отступ вокруг элемента подсветки
    allowClose: false,       // Возможность закрытия оверлея кликом
    doneBtnText: 'Готово',   // Текст кнопки завершения тура
});

Ключевые моменты:

  • animate: true отвечает за плавность появления и перемещения подсветки между шагами.
  • opacity управляет интенсивностью затемнения фона, создавая контраст с подсвечиваемым элементом.
  • padding определяет дополнительное пространство вокруг целевого элемента, улучшая визуальное восприятие подсветки.

Индивидуальная анимация шагов

Каждый шаг тура может иметь собственные параметры анимации. Это делается через объект шага при вызове driver.defineSteps():

driver.defineSteps([
    {
        element: '#button1',
        popover: {
            title: 'Кнопка отправки',
            description: 'Нажмите здесь, чтобы отправить форму'
        },
        stageBackground: '#fffae6', // Цвет фона подсветки для этого шага
        animate: true,               // Анимация только для данного шага
        padding: 20
    },
    {
        element: '#menu-item',
        popover: {
            title: 'Меню',
            description: 'Выберите раздел для перехода'
        },
        animate: true,
        padding: 15
    }
]);

Особенности:

  • stageBackground позволяет выделять элементы не только затемнением фона, но и цветовой подсветкой.
  • Отдельные шаги могут иметь свою анимацию, независимо от глобальной конфигурации Driver.js.
  • Анимация автоматически учитывает размер и позицию элемента, обеспечивая плавное перемещение оверлея между шагами.

Настройка скорости и типа анимации

Driver.js использует встроенные CSS-анимации, которые можно тонко настроить через CSS-переменные или кастомные классы. Пример изменения скорости анимации:

.driver-highlight {
    transition: all 0.5s ease-in-out; /* Ускорение и замедление */
    box-shadow: 0 0 20px rgba(255, 255, 0, 0.7);
}

Важные моменты:

  • transition управляет скоростью и типом анимации перемещения подсветки.
  • Можно добавлять эффект box-shadow, чтобы подсветка выглядела более выразительно.
  • Класс driver-highlight применяется автоматически к подсвечиваемому элементу, что позволяет создавать кастомные визуальные эффекты без изменения JS-кода.

Динамическая подсветка при изменении DOM

Driver.js корректно реагирует на изменение размеров и позиции элементов. Если элемент перемещается или появляется динамически, подсветка обновляется через:

driver.start();
window.addEventListener('resize', () => driver.refresh());
  • Метод driver.refresh() пересчитывает координаты элемента и обновляет анимацию подсветки.
  • Это особенно важно для адаптивных интерфейсов и SPA-приложений, где DOM может изменяться без перезагрузки страницы.

Пользовательские эффекты подсветки

Для создания уникальных анимаций можно использовать события onHighlightStarted и onHighlightEnded:

driver.defineSteps([
    {
        element: '#profile-pic',
        popover: {
            title: 'Профиль',
            description: 'Фото профиля с эффектом подсветки'
        },
        onHighlightStarted: (element) => {
            element.style.transform = 'scale(1.1)';
            element.style.transition = 'transform 0.3s ease-in-out';
        },
        onHighlightEnded: (element) => {
            element.style.transform = 'scale(1)';
        }
    }
]);

Суть подхода:

  • Использование событий позволяет расширять стандартную анимацию, добавляя масштабирование, вращение, мерцание или изменение цвета.
  • Анимация применяется только к конкретному шагу, не влияя на другие элементы тура.

Анимация последовательных шагов

При прохождении нескольких шагов подряд Driver.js плавно переносит подсветку между элементами. Для улучшения восприятия можно настроить:

driver.setOptions({
    stagePadding: 15,
    animate: true,
    animationDuration: 400 // Продолжительность перехода между шагами в миллисекундах
});
  • animationDuration отвечает за скорость перемещения подсветки между шагами.
  • Плавные переходы делают тур более естественным и визуально понятным.

Комбинирование с дополнительными эффектами

Подсветка может сочетаться с анимацией поповера и оверлея. Например, поповер можно сделать плавно появляющимся:

.driver-popover {
    opacity: 0;
    transform: translateY(-10px);
    transition: all 0.4s ease-in-out;
}

.driver-popover.driver-popover-open {
    opacity: 1;
    transform: translateY(0);
}
  • При открытии шага применяется класс driver-popover-open, запускающий анимацию.
  • Такая комбинация позволяет одновременно анимировать подсветку и контекстное окно, создавая гармоничный визуальный эффект.
Оглавление