JavaScript, как создать эту текстовую фоновую анимацию

Обзор: я взглянул на веб-сайт, на который вы ссылаетесь, и на нем есть несколько текстовых строк, которые заполняют весь экран, и они постоянно манипулируют ими.

Как добиться анимации: выберите все текстовые строки с помощью JavaScript и точно измените DOM с помощью innerHTML. Вам нужно получить случайные символы и точно изменить DOM, чтобы добиться запланированной анимации.

Анимация: установите интервал для вызова функции модификации DOM и добавьте логику для создания более сложной анимации.

Пример: Вот простой пример, который я создал, анимация состоит из 1 строки, и мы сдвигаем содержимое влево и вправо.

Внешняя игровая площадка: https://jsfiddle.net/cjkaqstg/49/

CSS:

text{
  font-size:16px;
  white-space:pre;
}

HTML:

<text id = "text-0"></text>

JS:

const text_element = document.getElementById("text-0");
const text_length = 30;
var shift_left = true;

function receiveRandomCharacter()
{
    // Receive a random character
    const characters  = "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";

  return characters[Math.floor(Math.random() * characters.length-1) +1];;
}
function modifyText(new_content)
{
    // Function to modify the text content
    text_element.innerHTML = new_content;   
}
function textAnimation()
{ 
  // Add some logic, in this case we will shift the characters to the left and right
  var row_content  = "";
    if (shift_left)
  {
    for(var x=0;x<text_length;x++)
    {
        if (x % 2==0)
      {
        // Even Number, add SPACE as a character
        row_content += "  ";
      }
      else
      {
        // Un-even number, add a random character
        row_content += receiveRandomCharacter();
      }
    }
    modifyText(row_content);
    shift_left = false;
  }
  else
  {
    for(var x=0;x<text_length;x++)
      {
        if (x % 2 ==0)
        {
          // Even Number, add a random character
          row_content += receiveRandomCharacter();
        }
        else
        {
          // Un-even number, add SPACE as a character
          row_content += "  ";
        }
      }
      modifyText(row_content);
      shift_left = true;
    }
    console.info(row_content);
}
const interval = setInterval(function() {
    // Call a function every X milliseconds
   textAnimation();
 }, 300);