Создание собственных тем оформления

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

Основные CSS-классы

  1. .introjs-tooltip – контейнер подсказки, содержащий текст и кнопки навигации.
  2. .introjs-arrow – стрелка, указывающая на целевой элемент.
  3. .introjs-tooltiptext – блок текста внутри подсказки.
  4. .introjs-tooltipbuttons – контейнер для кнопок «Next», «Back», «Skip».
  5. .introjs-helperLayer – слой затемнения вокруг фокусируемого элемента.

Изменение этих классов позволяет менять цвета, размеры, отступы, шрифты и анимацию появления.

Создание новой темы

Для создания собственной темы следует:

  1. Определить новый CSS-класс, например .custom-theme.
  2. Переопределить свойства подсказки и стрелки:
.custom-theme .introjs-tooltip {
    background-color: #2c3e50;
    color: #ecf0f1;
    font-family: 'Segoe UI', sans-serif;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

.custom-theme .introjs-arrow {
    border-color: #2c3e50;
}

.custom-theme .introjs-tooltipbuttons button {
    background-color: #2980b9;
    color: #fff;
    border: none;
    border-radius: 5px;
    padding: 5px 15px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.custom-theme .introjs-tooltipbuttons button:hover {
    background-color: #3498db;
}
  1. Применить тему к шагам при инициализации Intro.js:
introJs()
  .setOptions({
      steps: [
          { element: '#step1', intro: 'Первый шаг' },
          { element: '#step2', intro: 'Второй шаг' }
      ],
      tooltipClass: 'custom-theme'
  })
  .start();

Персонализация отдельных шагов

Иногда требуется, чтобы разные шаги имели разные стили. Для этого используется свойство tooltipClass на уровне отдельного шага:

steps: [
    { element: '#step1', intro: 'Шаг с темой A', tooltipClass: 'theme-a' },
    { element: '#step2', intro: 'Шаг с темой B', tooltipClass: 'theme-b' }
]

В CSS создаются соответствующие классы .theme-a и .theme-b, определяющие цвет фона, шрифты и отступы.

Адаптация стрелок и направлений

Стрелки подсказок могут быть изменены с помощью CSS-псевдоэлементов. Например:

.custom-theme .introjs-arrow {
    border-width: 10px !important;
}

.custom-theme .introjs-arrow:after {
    border-color: #2c3e50 transparent transparent transparent !important;
}

Можно также управлять положением стрелки, изменяя свойства top, left, right, bottom через медиазапросы для адаптивного дизайна.

Темизация затемняющего слоя

Слой затемнения (.introjs-helperLayer) позволяет создать контраст с фокусируемым элементом:

.custom-theme .introjs-helperLayer {
    background-color: rgba(44, 62, 80, 0.7);
    border-radius: 12px;
}

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

Интеграция с CSS-переменными

Для удобства масштабирования темы целесообразно использовать CSS-переменные:

:root {
    --tooltip-bg: #2c3e50;
    --tooltip-color: #ecf0f1;
    --button-bg: #2980b9;
    --button-hover-bg: #3498db;
}

.custom-theme .introjs-tooltip {
    background-color: var(--tooltip-bg);
    color: var(--tooltip-color);
}

.custom-theme .introjs-tooltipbuttons button {
    background-color: var(--button-bg);
}

.custom-theme .introjs-tooltipbuttons button:hover {
    background-color: var(--button-hover-bg);
}

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

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

Для плавного появления подсказок и стрелок можно использовать CSS-анимации:

.custom-theme .introjs-tooltip {
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.custom-theme .introjs-tooltip.introjs-showElement {
    opacity: 1;
    transform: translateY(0);
}

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

Комбинирование с JavaScript

Помимо CSS, тему можно менять динамически через JavaScript, используя методы Intro.js:

var intro = introJs();
intro.setOption('tooltipClass', 'custom-theme');
intro.onbeforechange(function(targetElement) {
    if(targetElement.id === 'step2') {
        this.setOption('tooltipClass', 'theme-b');
    }
});
intro.start();

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

Оглавление