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

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

Отступы между подсказкой и целевым элементом

Каждый шаг тура Intro.js может быть снабжен кастомными отступами через параметр padding. Этот параметр задаёт пространство между подсказкой и целевым элементом.

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

introJs()
  .setOptions({
    steps: [
      {
        element: '#button1',
        intro: 'Кнопка для отправки формы',
        position: 'right',
        // Задаём отступ 20 пикселей
        padding: 20
      },
      {
        element: '#input1',
        intro: 'Поле ввода данных',
        position: 'bottom',
        padding: 15
      }
    ]
  })
  .start();

Особенности:

  • padding может быть как числом (px), так и объектом с детальной настройкой по сторонам:
padding: { top: 10, right: 15, bottom: 20, left: 15 }
  • Если padding не задан, используется значение по умолчанию — 10 пикселей.
  • Установка отступа влияет на позиционирование подсказки, особенно при ограниченном пространстве на экране, предотвращая наложение подсказки на элементы интерфейса.

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

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

Основные параметры:

  • overlayOpacity — задаёт прозрачность затемнения (значение от 0 до 1).
  • overlayColor — цвет затемнения.
  • disableInteraction — блокировка кликов по элементам вне подсказки.
  • scrollToElement — автоматическая прокрутка страницы к целевому элементу.

Пример детальной настройки:

introJs()
  .setOptions({
    steps: [
      {
        element: '#menu',
        intro: 'Главное меню',
        position: 'bottom'
      }
    ],
    overlayOpacity: 0.7,
    overlayColor: 'rgba(0, 0, 0, 0.7)',
    disableInteraction: true,
    scrollToElement: true
  })
  .start();

Особенности работы с оверлеем:

  • disableInteraction предотвращает любые действия вне целевого элемента. Это полезно, если необходимо, чтобы пользователь строго следовал шагам тура.
  • scrollToElement учитывает размер отступов и позицию подсказки, обеспечивая правильное отображение на экранах с разной высотой.
  • Цвет оверлея можно задать как стандартными именами (black, white) так и в формате RGBA для гибкой настройки прозрачности.

Комбинированная настройка отступов и оверлея

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

  1. Увеличить padding, чтобы подсказка не перекрывала элементы.
  2. Настроить overlayOpacity, чтобы фон был достаточно затемнённым.
  3. Использовать disableInteraction, чтобы исключить случайные клики вне фокуса.
introJs()
  .setOptions({
    steps: [
      {
        element: '#feature-box',
        intro: 'Особенность продукта',
        position: 'top',
        padding: { top: 30, right: 20, bottom: 30, left: 20 }
      }
    ],
    overlayOpacity: 0.6,
    disableInteraction: true
  })
  .start();

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

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

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

const intro = introJs();
intro.onbeforechange(function(targetElement) {
  if (window.innerWidth < 600) {
    intro.setOption('padding', 10);
  } else {
    intro.setOption('padding', 25);
  }
});
intro.start();

Преимущества динамической настройки:

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

Заключение по настройке визуальных параметров

Правильная конфигурация отступов и оверлея позволяет создать тур, который выглядит естественно на любом устройстве. Комбинирование параметров padding, overlayOpacity, overlayColor и disableInteraction делает подсказки интерактивными и фокусированными, улучшая восприятие информации и снижая визуальный шум интерфейса.

Оглавление