Efecto de máquina de escribir como introducción de un sitio web

Hoy quiero compartir un sencillo y atractivo efecto de introducción que he creado para un sitio web. Utiliza el plugin Typed.js, ideal para simular una máquina de escribir que escribe y despliega textos dinámicamente.

Este efecto es perfecto para capturar la atención de los usuarios en la página de inicio de tu sitio web. Cuando el efecto termine te lleva a la segunda sección. Aquí tienes el código:

Código HTML y CSS

El HTML contiene las secciones principales de nuestra página, incluyendo un contenedor para el texto dinámico y otro para el título final, En los textos veras estos números (^500) esto es una opción que tiene Typed.js para dar un delay donde lo necesites.

<section id="section-1">
  <div id="typed-strings">
    <p>
      <strong>
        Muchos años después, frente al pelotón de fusilamiento, el coronel Aureliano Buendía había de recordar aquella tarde remota en que su padre lo llevó a conocer el hielo. ^500
      </strong>
      <strong>
        Macondo era entonces una aldea de veinte casas de barro y cañabrava construida a la orilla de un río de aguas diáfanas que se precipitaban por un lecho de piedras pulidas, ^350 blancas y enormes como huevos prehistóricos. ^500
      </strong>
      <strong>
        El mundo era tan reciente, ^350 que muchas cosas carecían de nombre, y para mencionarlas había que señalarlas con el dedo. ^700
      </strong>
    </p>
  </div>
  <span id="typed"></span>
</section>

<section id="section-2">
  <h2>CIEN AÑOS DE SOLEDAD</h2>
</section>

El CSS ayuda a dar formato al texto y asegura que las secciones se vean bien estructuradas:

#typed-strings {
  display: none;
}

#typed {
  font-size: clamp(1.25rem, 0.9537rem + 1.4815vw, 2.25rem);
  line-height: 1.2;
}

#typed strong {
  margin: 0;
  font-weight: 400;
  display: block;
  -webkit-transition: opacity 0.8s ease-out;
  transition: opacity 0.8s ease-out;
}

#typed strong:last-child::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 1ch;
  background-color: currentColor;
  animation: typedjsBlink 0.7s infinite;
}

#typed strong::first-letter {
  padding-left: 5%;
}

#typed.done strong:not(:last-child) {
  opacity: 0.3;
}

section {
  height: 100svh;
  padding: 24px;
}

section:nth-child(2) {
  background-color: #000;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

Código JavaScript

Finalmente, el siguiente script inicializa Typed.js y configura el efecto de desplazamiento al finalizar el texto:

const typedEffect = document.querySelector("#typed");
if (typedEffect) {
  var typed = new Typed("#typed", {
    stringsElement: "#typed-strings",
    startDelay: 1300,
    typeSpeed: 50,
    smartBackspace: false,
    contentType: "html",
    showCursor: false,
    onComplete: (self) => {
      typedEffect.classList.add("done");
      setTimeout(() => {
        const target = document.getElementById("section-2");
        target.scrollIntoView({ behavior: "smooth" });
      }, 3000);
    }
  });
}

¿Cómo funciona?

• Typed.js: Este plugin se encarga de escribir el texto en el elemento HTML especificado, caracter por caracter.
• Desplazamiento automático: Una vez que se completa el texto, la página se desplaza suavemente hacia la segunda sección, destacando el título del sitio.

¡Espero que este código te inspire a implementar efectos dinámicos en tus proyectos web!