document.addEventListener('DOMContentLoaded', () => {
// Настройки времени в миллисекундах
const DISPLAY_TIME = 2000; // Сколько времени элемент виден
const FADE_TIME = 500; // Время на исчезновение/появление
// Находим все элементы с атрибутом data-hero-title-
const elements = Array.from(document.querySelectorAll('*')).filter(el =>
Array.from(el.attributes).some(attr => attr.name.startsWith('data-hero-title-'))
);
if (elements.length === 0) return;
// Принудительная начальная настройка всех элементов
elements.forEach((el, index) => {
el.style.setProperty('transition', `opacity ${FADE_TIME}ms ease-in-out`, 'important');
if (index === 0) {
// Первый элемент делаем видимым сразу
el.style.setProperty('display', 'block', 'important');
el.style.setProperty('opacity', '1', 'important');
} else {
// Остальные элементы жёстко скрываем
el.style.setProperty('display', 'none', 'important');
el.style.setProperty('opacity', '0', 'important');
}
});
let currentIndex = 0;
// Основной цикл смены
setInterval(() => {
const currentEl = elements[currentIndex];
currentIndex = (currentIndex + 1) % elements.length;
const nextEl = elements[currentIndex];
// 1. Начинаем исчезновение текущего
currentEl.style.setProperty('opacity', '0', 'important');
setTimeout(() => {
// 2. Полностью убираем старый после завершения анимации
currentEl.style.setProperty('display', 'none', 'important');
// 3. Подготавливаем и показываем следующий (пока прозрачный)
nextEl.style.setProperty('display', 'block', 'important');
// Небольшой хак для того, чтобы браузер успел отрисовать display: block перед opacity
setTimeout(() => {
nextEl.style.setProperty('opacity', '1', 'important');
}, 20);
}, FADE_TIME);
}, DISPLAY_TIME + (FADE_TIME * 2));
});