Maison  >  Article  >  interface Web  >  Comment puis-je créer un effet de machine à écrire pour le texte de mon code HTML en utilisant CSS et JavaScript ?

Comment puis-je créer un effet de machine à écrire pour le texte de mon code HTML en utilisant CSS et JavaScript ?

Mary-Kate Olsen
Mary-Kate Olsenoriginal
2024-10-25 03:50:29897parcourir

How can I create a typewriter effect for text in my HTML using CSS and JavaScript?

Afficher le texte un caractère à la fois

Problème :

Améliorer l'élégance de l'affichage d'un texte HTML lettre par lettre , semblable aux légendes de jeux vidéo, utilisant CSS et JavaScript.

Solution :

Pour obtenir cet effet, une combinaison harmonieuse de JavaScript et CSS peut être utilisée. Diviser le texte en caractères et les ajouter séquentiellement avec JavaScript garantit une révélation lettre par lettre.

HTML :

<div id="msg"></div>

JavaScript :

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

Utilisation :

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

Cette solution gère avec élégance le contenu HTML interne, améliorant ainsi l'expérience d'affichage du texte.

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn