Ну в общем я сильно не заморачивался.
есть три варианта анимации.
1) Возможно самый быстрый это заранее готовить div столбец а потом двигать его целиком.
2) просто тупо добавлять в столбец по символу
3) Третий химичить с массивами символов, вероятно самый тормозной. (то есть анимировать каждый символ в отдельности )
4)upd Либо пихать текст в innerHtml
Пример реализации добавления по символу (2й вариант).
+ Обрати внимание на несколько вещей,
1) счетчик оставшихся кадров управляет логикой работы линии, при>12 кадров он добавляет символы, при <12 добавляет пробелы, а при нуле обнуляет строку и генерит новые параметры.
2) Я создал сцену на которой есть действующие лица (столбцы). Прикол в том что на сцену я могу добавлять не только линии, но и все что захочу и это тоже будет анимироваться. То есть я отделил сцену от действующих лиц тем самым позволив наполнять сцену нашего маленького театра разнотипными персонажами.
3) Ты по моему на паузу ставишь еще линии, я это не делал. Но если нужно то можно решить устанавливая тригер холостого хода в true и генерируя счетчик кадров, тригер будет вставать обратно в false при достижении счетчиком кадров нуля. Пока тригер true никакой анимации не происходит естественно.
<!DOCTYPE HTML>
<html>
<head>
<style>
.textline{
color:green;
width: 3%;
height:300px;
overflow:hidden;
text-align: center;
font: Consolas, Monaco, monospac;
font-size:20px;
float:left;
}
</style>
</head>
<body style="height:100%;background:black;">
<div id="stage"></div>
<script>
//Генератор случайных чисел
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max-min) ) + min;
}
//сцена на которой происходит анимация
function Stage(el){
//Действующие лица анимации
var children=[];
//добавляет новых актеров на сцену
this.add=function(line){
children.push(line);
el.appendChild(line.el);
}
//обновляет состояние актеров на сцене
this.update=function(time){
for (var i=0;i<children.length;i++){
children[i].update(time);
}
}
}
//Действующие лица анимации
function Line(){
var frameLength=getRandomInt(10,50),
oldTime=0,
interval=getRandomInt(10,400);
this.el=document.createElement('div');
this.el.classList.add('textline')
//обновляем линию
this.update=function(time){
var sym="";
if (time-oldTime>interval){ //скорость
//счетчик кадров
frameLength--;
if (frameLength>12){ //если больше 12 кадров добавим симво
sym=String.fromCharCode(getRandomInt(97,122));
this.el.innerText=sym+"\n"+this.el.innerText;
} else if(frameLength==0) { //если 0 кадров делаем сброс
this.el.innerText="";
frameLength=getRandomInt(10,50); //сгенерируем новую длинну
interval=getRandomInt(10,400); //сгенерируем новую скорость
} else { //если меньше 12 кадров то фигачим пробелы
this.el.innerText=" \n"+this.el.innerText;
}
oldTime=time;
}
}
}
//Счетчик кадров
function FPS(){
var oldTime='0',
count=0,
sec=0;
this.el=document.createElement('div');
this.el.style.color="#777";
this.el.innerText="0";
this.update=function(time){
//new Date медленная операция, как альтернативу можно юзать переменную time но точность измерения будет ниже
sec=new Date().getSeconds();
if (sec!=oldTime){
this.el.innerText='FPS='+count;
oldTime=sec;
count=0;
}
count++;
}
}
//=========== инициализация приложения ================//
var stage=new Stage(document.getElementById('stage') );
for (var i=0;i<33;i++){
stage.add( new Line() );
}
stage.add( new FPS() );
+function animloop(time){
stage.update(time);
requestAnimationFrame(animloop);
}(0);
</script>
</body>
</html>