Супер эффект анимации в теме на блоках ВордПресс

Код 

<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>

Почитаем еще?: