Вертикальная анимация текста на JavaScript

Оффтоп javascript
1

Привет всем! Я работаю над анимированным интро для своей игры на Unity. Мне удалось сделать так, чтобы текст появлялся на экране с помощью JavaScript. Вот как я это делаю:

setTimeout(function() {
  $('#появляющийся-текст').removeClass('скрыт');
}, 1000);

У меня есть такая HTML-структура:

<ul id="появляющийся-текст" class="скрыт">
  <li>П</li>
  <li>Р</li>
  <li>И</li>
  <li>В</li>
  <li>Е</li>
  <li>Т</li>
</ul>

И CSS для скрытия:

.скрыт li {
  opacity: 0;
}

Теперь я хочу, чтобы после появления текст плавно поднимался вверх. Как в заставке “Звездных войн”, только без наклона и желтого цвета. Просто вертикальное движение вверх. Как это можно реализовать? Буду благодарен за любые идеи!

2

слушай, а что если использовать css-анимацию? я недавно делал похожий эффект для сайта и это оказалось проще, чем я думал. добавь в css что-то вроде:

@keyframes поднятие {
  from { transform: translateY(0); }
  to { transform: translateY(-100%); }
}

#появляющийся-текст {
  animation: поднятие 5s linear;
}

и текст будет плавно подниматься вверх после появления. можно подстроить время и эффект под себя. главное не забудь убрать overflow у родительского элемента, чтобы текст не обрезался. удачи с твоим интро!

3

Чувак, я бы на твоем месте заюзал requestAnimationFrame вместо setTimeout. Оно работает намного плавнее и не тормозит браузер. Вот примерно так:

function анимация() {
  let поз = 0;
  function шаг() {
    поз -= 1;
    $('#появляющийся-текст').css('transform', `translateY(${поз}px)`);
    if (поз > -500) requestAnimationFrame(шаг);
  }
  requestAnimationFrame(шаг);
}

$('#появляющийся-текст').removeClass('скрыт');
анимация();

Можешь подогнать скорость и высоту под себя. Так текст будет ехать вверх максимально плавно. Удачи с твоим интро!