modalOverlayOpeningRadius

В библиотеке Shepherd.js свойство modalOverlayOpeningRadius отвечает за контроль радиуса открытия модального оверлея при активации шага тура. Этот параметр особенно важен для создания плавного и наглядного выделения элемента интерфейса, вокруг которого фокусируется внимание пользователя.

Назначение и поведение

modalOverlayOpeningRadius задает радиус окружности, через которую пользователь “видит” выделяемый элемент при появлении модального оверлея. По умолчанию оверлей закрывает весь интерфейс, затем постепенно открывается вокруг целевого элемента, создавая эффект spotlight. Значение радиуса задается в пикселях и может быть изменено для достижения желаемого визуального эффекта.

  • Тип значения: number
  • Единицы: пиксели
  • Применение: определяет размер «отверстия» в оверлее вокруг элемента

Например, установка значения 0 создаст мгновенное открытие с минимальной точкой фокусировки, а большое значение, например 100, создаст более плавный, расширяющийся эффект.

Пример использования

const tour = new Shepherd.Tour({
  defaultStepOptions: {
    classes: 'shepherd-theme-arrows',
    scrollTo: true,
    modalOverlayOpeningRadius: 80
  }
});

tour.addStep({
  id: 'step-1',
  text: 'Это ваш основной элемент.',
  attachTo: { element: '#main-button', on: 'bottom' },
  buttons: [
    {
      text: 'Далее',
      action: tour.next
    }
  ]
});

tour.start();

В этом примере при показе шага оверлей создаст окружность радиусом 80 пикселей вокруг элемента #main-button, плавно открывая область фокуса.

Взаимодействие с другими свойствами

  1. modal: modalOverlayOpeningRadius работает только если шаг настроен как модальный (modal: true). Если шаг немодальный, параметр игнорируется.
  2. modalOverlayOpeningPadding: этот параметр задает дополнительное пространство между границей элемента и радиусом открытия. Если modalOverlayOpeningRadius = 50, а padding = 10, итоговая видимая область увеличится до 60 пикселей.
  3. useModalOverlay: глобальная настройка тура, которая включает модальный оверлей для всех шагов, влияет на визуальное отображение и плавность эффекта открытия.

Динамическая настройка радиуса

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

tour.addStep({
  id: 'step-2',
  text: 'Другой элемент с большим фокусом.',
  attachTo: { element: '#secondary-button', on: 'top' },
  buttons: [
    {
      text: 'Назад',
      action: tour.back
    },
    {
      text: 'Далее',
      action: tour.next
    }
  ],
  modalOverlayOpeningRadius: 120
});

Влияние на производительность

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

Лучшие практики

  • Для элементов малого размера достаточно радиуса 40–60 пикселей.
  • Для крупных кнопок или блоков стоит увеличить радиус до 80–120 пикселей, чтобы область фокуса выглядела естественно.
  • Если шаг включает несколько элементов, рекомендуется вычислять радиус динамически, исходя из размера контейнера, чтобы оверлей точно охватывал все цели.

Совместимость

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

Визуальные эффекты

Использование modalOverlayOpeningRadius позволяет создавать:

  • Эффект spotlight, привлекающий внимание к элементу
  • Плавное появление фокуса, избегающее резких изменений интерфейса
  • Контрастный выделенный элемент при затемнении остальной части страницы

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

Оглавление