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

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

Настройка внешнего вида оверлея

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

introJs().setOptions({
  overlayOpacity: 0.7, // Прозрачность оверлея от 0 до 1
  overlayClass: 'custom-overlay', // Кастомный CSS-класс
});

Пояснения:

  • overlayOpacity – задает уровень прозрачности. Значение 0 делает оверлей полностью прозрачным, 1 — полностью непрозрачным.
  • overlayClass – позволяет подключать собственные CSS-стили, например, градиенты, текстуры или цветовые схемы.

Пример CSS для кастомного класса:

.custom-overlay {
  background-color: rgba(255, 100, 100, 0.5);
  backdrop-filter: blur(4px);
}

Использование фильтров CSS (blur, brightness) делает интерфейс более современным и визуально привлекательным.

Изменение формы подсвечиваемого элемента

По умолчанию подсветка вокруг элемента создается прямоугольником с закругленными углами. Настроить форму можно с помощью CSS:

.custom-tooltip + .introjs-helperLayer {
  border-radius: 12px;
  box-shadow: 0 0 15px rgba(0,0,0,0.3);
}

Параметры:

  • border-radius – задает скругление углов подсвечиваемого блока.
  • box-shadow – добавляет тень для лучшего визуального разделения элемента от оверлея.

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

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

Intro.js предоставляет события, которые позволяют управлять поведением оверлея во время тура:

introJs()
  .onbeforechange(function(targetElement) {
    // Меняем цвет оверлея в зависимости от элемента
    if (targetElement.id === 'specialButton') {
      document.querySelector('.introjs-overlay').style.backgroundColor = 'rgba(0,150,255,0.5)';
    }
  })
  .start();

Ключевые события:

  • onbeforechange(targetElement) – вызывается перед отображением нового шага, позволяет изменять стили и контент динамически.
  • onafterchange(targetElement) – выполняется после показа шага, подходит для анимаций подсветки.
  • onexit() – используется для очистки кастомных стилей и сброса состояния оверлея.

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

Встроенная анимация появления и исчезновения оверлея может быть расширена с помощью CSS-переходов:

.introjs-overlay {
  transition: background-color 0.4s ease, opacity 0.4s ease;
}

Также возможно динамическое управление прозрачностью через JavaScript, например, для эффекта постепенного затемнения при наведении на элементы:

const overlay = document.querySelector('.introjs-overlay');
overlay.addEventListener('mouseenter', () => overlay.style.opacity = '0.9');
overlay.addEventListener('mouseleave', () => overlay.style.opacity = '0.6');

Добавление интерактивных элементов поверх оверлея

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

const customNote = document.createElement('div');
customNote.innerText = 'Важная информация';
customNote.className = 'overlay-note';
document.body.appendChild(customNote);

Пример CSS:

.overlay-note {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  padding: 10px 20px;
  background-color: #ffeb3b;
  border-radius: 5px;
  font-weight: bold;
  z-index: 9999;
}

Такой подход позволяет одновременно затемнять интерфейс и выводить на передний план дополнительные указания.

Управление слоями оверлея и z-index

Чтобы оверлей корректно взаимодействовал с другими элементами интерфейса, важно правильно настроить z-index. Intro.js использует значения по умолчанию (999 для оверлея, 1000 для подсвеченного элемента). Для сложных интерфейсов их можно изменять:

document.querySelector('.introjs-overlay').style.zIndex = '2000';
document.querySelector('.introjs-helperLayer').style.zIndex = '2001';

Это обеспечивает стабильную работу оверлея даже при наличии модальных окон, выпадающих меню и других слоёв.

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

Intro.js легко комбинируется с анимационными библиотеками вроде GSAP или Anime.js. Например, можно плавно появлять оверлей с эффектом затемнения и масштабирования подсвечиваемого блока:

import gsap from "gsap";

introJs().onafterchange((el) => {
  gsap.fromTo('.introjs-helperLayer', 
    { scale: 0.9, opacity: 0 }, 
    { scale: 1, opacity: 1, duration: 0.5 }
  );
});

Такой подход делает туры визуально динамичными и улучшает восприятие интерфейса пользователем.

Заключение по кастомизации оверлея

Кастомизация оверлея в Intro.js включает:

  • управление прозрачностью и цветом;
  • изменение формы и добавление теней;
  • динамическое изменение стилей через события;
  • интеграцию с анимациями и дополнительными интерактивными элементами;
  • настройку z-index для корректного взаимодействия с другими элементами страницы.

Грамотная комбинация этих инструментов позволяет создавать визуально привлекательные и интуитивно понятные пошаговые инструкции для любых веб-приложений.

Оглавление