Настройки оверлея

Оверлей в Driver.js — это полупрозрачный слой, который перекрывает интерфейс страницы, фокусируя внимание пользователя на активных элементах. Настройка оверлея позволяет управлять визуальным стилем, поведением при взаимодействии и уровнями прозрачности.

Цвет и прозрачность оверлея

Основные параметры, влияющие на визуальное оформление оверлея, задаются через свойства:

  • overlayColor — определяет цвет оверлея. Поддерживаются любые CSS-значения цвета, например rgba(0,0,0,0.5), #000, blue.
  • opacity — регулирует степень прозрачности. Значение от 0 (полностью прозрачный) до 1 (полностью непрозрачный). Важно учитывать, что прозрачность оверлея влияет на видимость элементов под ним.

Пример конфигурации:

const driver = new Driver({
    overlay: true,
    overlayColor: 'rgba(0, 0, 0, 0.7)',
    opacity: 0.8
});

В этом примере оверлей будет полупрозрачным с тёмным оттенком, создавая контраст с выделяемым элементом.

Фокусировка на элементах

Driver.js автоматически создаёт “выемку” в оверлее вокруг активного элемента. Настройки фокуса включают:

  • padding — расстояние между элементом и границей выемки. Увеличение значения создаёт дополнительное пространство вокруг выделенного блока.
  • allowClose — определяет возможность закрытия оверлея при клике на него. Если установлено true, пользователь может кликнуть по затемнённой области для завершения тура.
  • opacity фокуса — отдельная настройка, которая может отличаться от общего уровня прозрачности оверлея.
const driver = new Driver({
    overlay: true,
    padding: 10,
    allowClose: false
});

Здесь выделяемый элемент окружён дополнительным пространством в 10 пикселей, а закрыть оверлей кликом по пустому месту нельзя.

Анимации и плавность

Оверлей поддерживает анимации появления и скрытия, чтобы переход между шагами тура выглядел естественно:

  • animate — включает или отключает анимацию появления оверлея.
  • duration — время анимации в миллисекундах.
  • easing — функция плавности (например, 'ease-in-out').
const driver = new Driver({
    overlay: true,
    animate: true,
    duration: 500,
    easing: 'ease-in-out'
});

Эта конфигурация создаёт плавное появление и скрытие затемнённого фона за полсекунды.

Поведение при кликах и события

Driver.js позволяет настраивать реакцию оверлея на взаимодействие:

  • onClickOverlay — функция-обработчик при клике на оверлей. Часто используется для логирования или перехода к следующему шагу.
  • onOverlayShow и onOverlayHide — события, вызываемые при отображении или скрытии оверлея. Позволяют запускать дополнительные действия, например, запуск анимации на фоне.

Пример:

const driver = new Driver({
    overlay: true,
    onClickOverlay: () => console.log('Клик по оверлею'),
    onOverlayShow: () => console.log('Оверлей показан'),
    onOverlayHide: () => console.log('Оверлей скрыт')
});

Настройки многослойного интерфейса

В сложных интерфейсах с модальными окнами или фиксированными элементами Driver.js предоставляет возможность:

  • zIndex — установка слоя оверлея. Значение должно быть выше, чем у фоновых элементов, но ниже, чем у тултипов или подсказок.
  • highlightZIndex — отдельный слой для выделенного элемента, чтобы он всегда оставался поверх оверлея.
const driver = new Driver({
    overlay: true,
    zIndex: 9000,
    highlightZIndex: 9500
});

Это гарантирует, что затемнённый фон не перекроет важные элементы интерфейса.

Комбинирование настроек

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

const driver = new Driver({
    overlay: true,
    overlayColor: 'rgba(0,0,0,0.6)',
    padding: 15,
    animate: true,
    duration: 400,
    easing: 'ease-out',
    allowClose: true,
    zIndex: 10000
});

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

Оглавление