Есть массив, состоящий из 20 слов. Нужно сделать прокрутку текста по кругу 1 раз в секунду, чтобы каждое следующее слово заменяло предыдущее. Я вижу примерно так:
Не могу придумать, как реализовать такую логику отображения. Если заменять слова просто js кодом, то как к этому прикрутить css-анимацию? Я вижу так, чтобы прописать:
<style>
.scrolls .inactive{
display: none;
}
.scrolls .postactive{
/*animation code*/
}
.scrolls .preactive{
/*animation code*/
}
.scrolls .active{
/*style code*/
}
</style>
<ui class="scrolls">
<li class="active">World 1</li>
<li class="postactive">World 2</li>
<li class="inactive">World 3</li>
<li class="inactive">World 4</li>
<li class="inactive">World 5</li>
<li class="inactive">World 6</li>
<li class="inactive">World 7</li>
<li class="inactive">World 8</li>
<li class="inactive">World 9</li>
<li class="inactive">World 10</li>
<li class="preactive">World 11</li>
</ui>
Но как тогда изменять классы?