Как сделать такой же эффект появление текста

Question

Сегодня, когда искал информацию нашёл вот такую страничку с интересным эффектом появлением текста.

https://rauno.me/projects - вот на данном сайте, можно увидеть что текст появляется из неопределенных букв и символов. Не могли бы Вы подсказать мне или привести пример, как так было сделано. Эффект называется Bruteforce или Encoding

Answer 1

const targetText = document.getElementById("target-text");
const targetString = targetText.textContent;
const alphabet = " abcdefghijklmnopqrstuvwxyz";
const interval = 25; // milliseconds between each letter change

function getRandomChar() {
  return alphabet[Math.floor(Math.random() * alphabet.length)];
}

function animateText() {
  let currentString = Array(targetString.length).fill("");
  let index = 0;

  const intervalId = setInterval(() => {
    for (let i = 0; i < currentString.length; i++) {
      if (i < index) {
        currentString[i] = targetString[i];
      } else {
        currentString[i] = getRandomChar();
      }
    }

    targetText.textContent = currentString.join("");

    if (index >= targetString.length) {
      clearInterval(intervalId);
    } else {
      index++;
    }
  }, interval);
}

document.addEventListener("DOMContentLoaded", animateText);

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  font-family: sans-serif;
}

.container {
  width: 544px;
  overflow: hidden;
}

#target-text {
  white-space: nowrap;
}

<div class="container">
  <span id="target-text">Нашёл вот такую страничку с интересным эффектом появлением текстa</span>
</div>

БЛОГ НА HUSL

Как сделать такой же эффект появление текста

Ответы (1 шт):