Код
<style>
.title {
position: absolute;
width: 100%;
opacity: 0;
transform: translateY(100%);
transition: opacity 2s, transform 2s;
}
.title.active {
opacity: 1;
transform: translateY(0);
}
.title.out {
opacity: 0;
transform: translateY(-100%);
}
.title.below {
transform: translateY(100%);
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function() {
const titles = document.querySelectorAll('.title');
let currentIndex = 0;
function swapTitles() {
const currentTitle = titles[currentIndex];
const nextIndex = (currentIndex + 1) % titles.length;
const nextTitle = titles[nextIndex];
// Удалить классы 'active' и добавить класс 'out' текущему заголовку
currentTitle.classList.remove('active');
currentTitle.classList.add('out');
// После окончания анимации удаления, сбросить текущий заголовок и скрыть его
setTimeout(() => {
currentTitle.classList.remove('out');
currentTitle.classList.add('below');
// Показать следующий заголовок
nextTitle.classList.remove('below');
nextTitle.classList.add('active');
}, 2000); // Время анимации должно совпадать с transition в CSS
// Обновить индекс для следующего цикла
currentIndex = nextIndex;
}
// Установить начальное состояние
titles[currentIndex].classList.add('active');
// Менять заголовки каждые 5 секунд
setInterval(swapTitles, 3400);
});
</script>