Efecto de máquina de escribir

Introducción

En este laboratorio, aprenderemos cómo crear una animación con efecto de máquina de escribir utilizando HTML, CSS y JavaScript. El efecto de máquina de escribir es una animación popular que simula la aparición de texto que se escribe en una página, carácter a carácter. Al final de este laboratorio, serás capaz de crear tu propia animación con efecto de máquina de escribir para agregar un elemento dinámico y atractivo a tus proyectos web.

Este es un Guided Lab, que proporciona instrucciones paso a paso para ayudarte a aprender y practicar. Sigue las instrucciones cuidadosamente para completar cada paso y obtener experiencia práctica. Los datos históricos muestran que este es un laboratorio de nivel principiante con una tasa de finalización del 86%. Ha recibido una tasa de reseñas positivas del 100% por parte de los estudiantes.

index.html y style.css ya se han proporcionado en la máquina virtual.

Para crear una animación con efecto de máquina de escribir, siga estos pasos:

Defina dos animaciones, typing y blink. typing anima los caracteres y blink anima el cursor.
Utilice el pseudo-elemento ::after para agregar el cursor al elemento contenedor.
Utilice JavaScript para establecer el texto para el elemento interno y establecer la variable --characters, que contiene la cantidad de caracteres. Esta variable se utiliza para animar el texto.
Utilice white-space: nowrap y overflow: hidden para hacer que el contenido sea invisible según sea necesario.

Aquí está el código HTML:

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

Y aquí está el código 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;
  }
}

Y finalmente, aquí está el código JavaScript:

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

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

Haga clic en 'Go Live' en la esquina inferior derecha para ejecutar el servicio web en el puerto 8080. Luego, puede actualizar la pestaña Web 8080 para previsualizar la página web.

Resumen

¡Felicidades! Has completado el laboratorio del Efecto de máquina de escribir. Puedes practicar más laboratorios en LabEx para mejorar tus habilidades.

Crear el efecto de máquina de escribir con HTML, CSS y JavaScript

Introducción

Efecto de máquina de escribir

Resumen