Animation d'effet de machine à écrire | HTML, CSS, JavaScript

Introduction

Dans ce laboratoire, nous allons apprendre à créer une animation d'effet de machine à écrire à l'aide de HTML, CSS et JavaScript. L'effet de machine à écrire est une animation populaire qui simule l'apparition de texte qui est tapé sur une page, un caractère à la fois. À la fin de ce laboratoire, vous serez capable de créer votre propre animation d'effet de machine à écrire pour ajouter un élément dynamique et captivant à vos projets web.

Ceci est un Guided Lab, qui fournit des instructions étape par étape pour vous aider à apprendre et à pratiquer. Suivez attentivement les instructions pour compléter chaque étape et acquérir une expérience pratique. Les données historiques montrent que c'est un laboratoire de niveau débutant avec un taux de réussite de 86%. Il a reçu un taux d'avis positifs de 100% de la part des apprenants.

Effet de machine à écrire

index.html et style.css ont déjà été fournis dans la machine virtuelle.

Pour créer une animation d'effet de machine à écrire, suivez ces étapes :

Définissez deux animations, typing et blink. typing anime les caractères, et blink anime le curseur.
Utilisez le pseudo-élément ::after pour ajouter le curseur à l'élément conteneur.
Utilisez JavaScript pour définir le texte pour l'élément interne et définir la variable --characters, qui contient le nombre de caractères. Cette variable est utilisée pour animer le texte.
Utilisez white-space: nowrap et overflow: hidden pour rendre le contenu invisible si nécessaire.

Voici le code HTML :

<div class="typewriter-effect">
  <div class="text" id="typewriter-text"></div>
</div>

Et voici le code CSS :

.typewriter-effect {
  display: flex;
  justify-content: center;
  font-family: monospace;
}

.typewriter-effect > .text {
  max-width: 0;
  animation: typing 3s steps(var(--characters)) infinite;
  white-space: nowrap;
  overflow: hidden;
}

.typewriter-effect::after {
  content: " |";
  animation: blink 1s infinite;
  animation-timing-function: step-end;
}

@keyframes typing {
  75%,
  100% {
    max-width: calc(var(--characters) * 1ch);
  }
}

@keyframes blink {
  0%,
  75%,
  100% {
    opacity: 1;
  }
  25% {
    opacity: 0;
  }
}

Et enfin, voici le code JavaScript :

const typeWriter = document.getElementById("typewriter-text");
const text = "Lorem ipsum dolor sit amet.";

typeWriter.innerHTML = text;
typeWriter.style.setProperty("--characters", text.length);

Veuillez cliquer sur 'Go Live' dans le coin inférieur droit pour exécuter le service web sur le port 8080. Ensuite, vous pouvez rafraîchir l'onglet Web 8080 pour prévisualiser la page web.

Sommaire

Félicitations ! Vous avez terminé le laboratoire Effet de machine à écrire. Vous pouvez pratiquer d'autres laboratoires dans LabEx pour améliorer vos compétences.

Création d'un effet de machine à écrire avec HTML, CSS et JavaScript

Introduction

Effet de machine à écrire

Sommaire