Кастомизация оверлея

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

Настройка базового оверлея

По умолчанию Shepherd.js использует простое затемнение фона при активации шага. Для изменения его параметров используется объект modal в конфигурации шага:

const tour = new Shepherd.Tour({
  useModalOverlay: true,
  defaultStepOptions: {
    scrollTo: { beh * avior: 'smooth', block: 'center' },
    modalOverlayOpeningPadding: 5
  }
});

Ключевые параметры:

  • useModalOverlay — включает или отключает модальное затемнение.
  • modalOverlayOpeningPadding — отступ между целевым элементом и границей оверлея.
  • scrollTo — настройка автоматической прокрутки к элементу.

Изменение стиля оверлея через CSS

Shepherd.js использует динамический элемент <div> с классом .shepherd-modal-overlay-container для оверлея. Для кастомизации его внешнего вида применяются стандартные CSS-селекторы:

.shepherd-modal-overlay-container {
  background-color: rgba(0, 0, 0, 0.7);
  transition: background-color 0.3s ease;
  border-radius: 8px;
}

.shepherd-modal-overlay-container.shepherd-open {
  background-color: rgba(0, 0, 0, 0.5);
}

Возможности стилизации:

  • Цвет и прозрачность через background-color.
  • Плавное появление и исчезновение с помощью transition.
  • Скругление углов для более мягкого визуального эффекта.
  • Анимация появления через добавление/удаление классов .shepherd-open и .shepherd-close.

Управление поведением оверлея

Shepherd.js позволяет контролировать не только визуальную составляющую, но и поведение оверлея:

  • Закрытие тура при клике на оверлей
tour.on('cancel', () => console.log('Тур завершен'));
tour.start();

document.querySelector('.shepherd-modal-overlay-container').addEventListener('click', () => {
  tour.cancel();
});
  • Игнорирование кликов вне шага

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

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

Shepherd.js предоставляет возможность использовать подсветку активного элемента:

defaultStepOptions: {
  attachTo: {
    element: '.button-start',
    on: 'bottom'
  },
  modalOverlayOpeningPadding: 10
}

В сочетании с CSS:

.shepherd-modal-overlay-container .shepherd-element {
  box-shadow: 0 0 0 4px rgba(255, 255, 0, 0.6);
  border-radius: 6px;
}

Это создает эффект «маски», где фон затемнен, а элемент выглядит подсвеченным.

Динамическая кастомизация оверлея на этапе тура

Иногда требуется менять стиль оверлея для разных шагов:

tour.addStep({
  id: 'step-1',
  text: 'Пример подсветки кнопки',
  attachTo: { element: '.start-btn', on: 'top' },
  modalOverlayOpeningPadding: 15,
  classes: 'custom-overlay-step'
});

CSS для этого шага:

.shepherd-modal-overlay-container.custom-overlay-step {
  background-color: rgba(0, 100, 200, 0.6);
}

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

Использование анимаций и переходов

Добавление анимаций повышает визуальную привлекательность:

.shepherd-modal-overlay-container {
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}

.shepherd-modal-overlay-container.shepherd-open {
  opacity: 1;
}

Преимущество такого подхода в том, что при смене шагов оверлей плавно появляется и исчезает, создавая более мягкое восприятие.

Поддержка мобильных устройств

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

window.addEventListener('resize', () => {
  const overlay = document.querySelector('.shepherd-modal-overlay-container');
  overlay.style.borderRadius = window.innerWidth < 768 ? '0' : '8px';
});
  • На мобильных устройствах часто делают оверлей без скруглений и с меньшей прозрачностью.
  • Можно изменять отступы через modalOverlayOpeningPadding, чтобы шаги оставались видимыми.

Интеграция с другими библиотеками

Shepherd.js оверлей легко интегрируется с анимационными библиотеками вроде GSAP или Anime.js для сложных эффектов, например:

gsap.from('.shepherd-modal-overlay-container', {
  duration: 0.5,
  opacity: 0,
  ease: 'power2.out'
});

Это позволяет создавать сложные переходы, которые невозможно реализовать только через CSS.

Кастомизация оверлея в Shepherd.js включает три уровня контроля: визуальный стиль через CSS, поведение через API, динамическая адаптация под шаги и устройства. Такой подход делает интерфейс более интуитивным и визуально выразительным, а тур — максимально комфортным и информативным.

Оглавление