How to Animate Text Display Letter by Letter with CSS and JavaScript?

Animated Text Display with CSS and JavaScript

Showing text letter by letter adds a dynamic and engaging element to web pages. While brute-force approaches exist, CSS3 and jQuery offer more elegant solutions.

CSS3 Animation

CSS3 provides the text-shadow property, which creates multiple shadows of the text. By animating the shadows, you can create the illusion of the text appearing letter by letter.

<code class="css">#msg {
  text-shadow: 0 0 0 #000, 0 0 0 #000, 0 0 0 #000;
  animation: show-text 3s steps(5);
  animation-fill-mode: forwards;
}

@keyframes show-text {
  from {
    text-shadow: 0 0 0 transparent, 0 0 0 transparent, 0 0 0 transparent;
  }
  to {
    text-shadow: 0 0 0 #000, 0 0 0 #000, 0 0 0 #000;
  }
}</code>

jQuery Animation

jQuery offers a more direct approach by splitting the text into individual characters and appending them to the target element at specified intervals.

<code class="html"><div id="msg"></div></code>

<code class="jquery">var showText = function (target, message, index, interval) {
  if (index < message.length) {
    $(target).append(message[index++]);
    setTimeout(function () { showText(target, message, index, interval); }, interval);
  }
};

$(function () {
  showText("#msg", "Hello, World!", 0, 500);
});</code>

This solution also supports handling inner HTML content by recursively applying the animation to each child element.

The above is the detailed content of How to Animate Text Display Letter by Letter with CSS and JavaScript?. For more information, please follow other related articles on the PHP Chinese website!