Вертикальная карусель строк

Интересный эффект для строк с текстом. Строки появляются снизу, поднимаются наверх и исчезают. Этот эффект может быть использован для создания динамичного отображения программного кода или текста на веб-странице.

Начну прямо с демонстрации:

See the pen (@Websitio) on CodePen.

Разметка предельно простая: параграф, внутри которого каждая из строк обёрнута в тег span.

Родительскому параграфу нужно задать position: relative для того, чтобы дочерние элементы позиционировались относительно него.

Теперь стили для каждой из строк:

.line {
  position: absolute; /* Позволяет позиционировать строки относительно родителя */
  top: 70%; /* Начальная позиция строки */
  padding-left: 80px; /* Отступ слева для визуального эффекта */
  animation-name: move; /* Имя анимации */
  animation-duration: calc(var(--animation-duration) * 10); /* Длительность анимации */
  animation-timing-function: ease-in-out; /* Плавность анимации */
  animation-iteration-count: infinite; /* Бесконечное повторение анимации */
  animation-delay: calc(var(--animation-duration) * var(--line-index)); /* Задержка для каждой строки */
  color: var(--color); /* Цвет текста */
  opacity: 0; /* Начальная прозрачность */
  white-space: nowrap; /* Запрет переноса текста на новую строку */
  user-select: none; /* Запрет выделения текста */
}

Вот что тут происходит: смещаем строки в точку появления (top: 70%). Можно и другое значение, но у меня снизу цветной градиент из которого как будто появляется этот текст. Задана начальная нулевая прозрачность, а также свойства запрета переноса и запрета выделения — потому что выделять двигающийся текст это отдельное развлечение. И, конечно, сама анимация.

Можно было бы задавать задержку анимации animation-delay для каждого элемента по отдельности через nth-child, но мне было проще написать скрипт, который и посчитает количество элементов и раздаст каждому кастомное свойство --line-index с его порядковым номером для удобного вычисления всего одной формулой.

  animation-delay: calc(var(--animation-duration) * var(--line-index));

const items = document.querySelectorAll('.line');
const itemsBlock = document.querySelector('.block');
items.forEach((item, index) => {
// Устанавливаем номер элемента в custom property
item.style.setProperty('--line-index', index + 1);
});
console.log(items.length);
itemsBlock.style.setProperty('--number-of-lines', items.length);

Попробуйте адаптировать этот код под свои нужды и экспериментируйте с различными стилями и анимациями!