Параметры анимации и скорости

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

Встроенные анимации

Intro.js поддерживает несколько встроенных эффектов появления:

fade — плавное появление и исчезновение подсказки, без перемещения.
slide — выдвижение подсказки с небольшой анимацией с края экрана.
zoom — увеличение масштаба подсказки при появлении.

Для применения анимации используется CSS-класс, указанный в tooltipClass. Пример настройки анимации:

introJs().setOptions({
    steps: [
        { element: '#step1', intro: 'Пример подсказки с fade' }
    ],
    tooltipClass: 'customTooltip fade'
}).start();

В этом примере класс fade отвечает за плавное появление, а customTooltip позволяет добавлять собственные стили.

Контроль скорости анимации

Скорость анимации в Intro.js управляется с помощью CSS-свойства transition-duration. По умолчанию подсказки отображаются за 0.3 секунды, но это значение можно изменить для каждой подсказки индивидуально или глобально.

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

.introjs-tooltip {
    transition-duration: 0.6s !important;
}

Индивидуальная настройка на уровне шага через добавление CSS-класса:

introJs().setOptions({
    steps: [
        { element: '#step2', intro: 'Медленное появление', tooltipClass: 'slowTooltip' }
    ]
}).start();

.slowTooltip {
    transition-duration: 1s !important;
}

Плавное перемещение к элементам

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

introJs().setOptions({
    steps: [
        { element: '#step3', intro: 'Переход к элементу плавно', position: 'right' }
    ],
    scrollToElement: true
}).start();

Если требуется более точная настройка времени скролла, можно изменить стандартное поведение через событие onbeforechange:

intro.onbeforechange(function(targetElement) {
    window.scrollTo({
        top: targetElement.offsetTop,
        beh * avior: 'smooth'
    });
});

Настройка задержки анимации

Иногда необходимо добавить паузу перед появлением подсказки. Это делается через комбинацию CSS-анимации и JavaScript. Пример задержки в 500 мс:

introJs().setOptions({
    steps: [
        { element: '#step4', intro: 'Подсказка с задержкой', tooltipClass: 'delayedTooltip' }
    ]
}).start();

.delayedTooltip {
    opacity: 0;
    animation: fadeIn 0.5s 0.5s forwards;
}

@keyframes fadeIn {
    to { opacity: 1; }
}

Анимация при завершении шага

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

.introjs-tooltip.fadeOut {
    opacity: 0;
    transition: opacity 0.4s ease-in-out;
}

И JavaScript для управления событием:

intro.onbeforechange(function(targetElement) {
    const tooltip = document.querySelector('.introjs-tooltip');
    tooltip.classList.add('fadeOut');
});

Комбинирование параметров

Все параметры анимации и скорости можно комбинировать для достижения сложных эффектов:

плавное появление с fade
замедленный переход между элементами с кастомным transition-duration
задержка перед показом с помощью CSS-анимации
анимация скрытия через fadeOut

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