Показать текст буква за буквой

Question

Каков наиболее элегантный способ отображения букв html текста (например, подписи к видеоиграм) с использованием CSS и JavaScript?

Хотя я уверен, что его можно решить, используя метод грубой силы (скажем, разделив символы и напечатав их по одному, используя jQuery.append()), я надеюсь, что есть некоторые CSS3 (псевдоэлементы?) или волшебство JQuery, чтобы сделать это более элегантно.

Дополнительные баллы, если решение учитывает внутреннее содержимое HTML.

Answer 1

Для этого есть пара библиотек. Существуют TypeItJs и TypedJS , оба из которых позволяют использовать html в том, что вы печатаете, а также множество других методов, которые помогают анимировать эффекты пишущей машинки.

Answer 2

Я пытался решить ту же проблему, и я нашел это решение, которое, кажется, работает.

HTML

<div id='target'></div>

jQuery

$(function() {
  var message = 'Hello world';
  var index = 0;

  function displayLetter() {
    if (index < message.length) {
      $('#target').append(message[index++]);
    }
    else{
      clearInterval(repeat);
    }
  }
  var repeat = setInterval(displayLetter, 100);
});

Answer 3

есть хороший ответ, как это сделать здесь : это способ, которым вы можете манипулировать каждой буквой с помощью любого доступного свойства .animate (), а не с помощью хаков, таких как покрытие текста с помощью s и т. Д.

Answer 4

Vanillla

(function () {

var showText = function(target, msg, index, interval){

  var el = document.getElementById(target);

  if(index < msg.length){
    el.innerHTML = el.innerHTML + msg.charAt(index);
    index = index + 1;
    setTimeout(function(){
      showText(target,msg,index,interval);
    },interval);
  }

};


showText("id", "Hello, World!", 0, 50);   

})();

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

Answer 5

Вам нужно обернуть каждую букву в тег span, потому что анонимные HTML-элементы не могут быть стилизованы.Тогда покажите один промежуток за один раз.Это позволяет избежать некоторых проблем с innerText / innerHTML (без перекомпоновки DOM?), Но в вашем случае это может быть излишним.