Comment animer un affichage de texte lettre par lettre avec CSS et JavaScript ?

Affichage de texte animé avec CSS et JavaScript

L'affichage du texte lettre par lettre ajoute un élément dynamique et attrayant aux pages Web. Bien qu'il existe des approches par force brute, CSS3 et jQuery offrent des solutions plus élégantes.

Animation CSS3

CSS3 fournit la propriété text-shadow, qui crée plusieurs ombres du texte . En animant les ombres, vous pouvez créer l'illusion du texte apparaissant lettre par lettre.

<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 propose une approche plus directe en divisant les texte en caractères individuels et en les ajoutant à l'élément cible à des intervalles spécifiés.

<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>

Cette solution prend également en charge la gestion du contenu HTML interne en appliquant de manière récursive l'animation à chaque élément enfant.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!