¿Cómo crear un efecto de escritura animado usando typed.js?

Typed.js es una biblioteca de JavaScript que se utiliza para escribir un conjunto de strings a la velocidad que establezca, retroceder lo que está escrito y comenzar a escribir con otra string que haya establecido.

Comencemos por crear una carpeta de proyecto y asígnele el nombre que desee. Cree dos archivos y nómbrelos como «index.html» y «style.css»

Escribe el siguiente código en “index.html”

HTML

<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>Typed.js</title>
    <!-- Import style.css from root directory -->
    <link rel="stylesheet" href="./style.css" />
</head>
  
<body>
    <div class="heading">
        <h1>GeeksforGeeks</h1>
        <h3>
            <span class="text-slider-items">
                A computer Science portal for geeks,
                A place to pratice code
            </span>
  
            <strong class="text-slider"></strong>
            <!-- classes "text-slider" 
            and "text-slider-items"
            for typed.js script -->
        </h3>
    </div>
</body>
  
</html>

Escriba el siguiente código CSS en su archivo «style.css» .

<style>
    body {
        background-color: white;
        font-family: Roboto, Oxygen, Ubuntu, Cantarell,
            'Open Sans', 'Helvetica Neue', sans-serif;
  
    }
  
    .text-slider-items {
        display: none;
    }
  
    .heading {
        margin-top: 200px;
        text-align: center;
    }
  
    .heading h1 {
        color: limegreen;
        font-size: 70px;
    }
  
    .heading h3 {
        color: black;
        font-size: 20px;
    }
</style>

Ahora debe descargar la carpeta de scripts «typed.js» desde el siguiente enlace y descomprimirlo y guardarlo en el directorio de su proyecto.

Enlace de descarga: https://mattboldt.com/demos/typed-js/

Además, debe incluir la biblioteca jQuery para usar las funciones jQuery. Hay dos formas, ya sea descargando y agregando el archivo «jquery.js» o agregando su enlace de archivo CDN. Aquí agregará jQuery mediante el enlace CDN.

Enlace CDN: https://developers.google.com/speed/libraries/devguide#jquery

Tenemos que importar y agregar el archivo «typed.js» de la carpeta «typed.js». Agregue todos los archivos JavaScript justo antes de la etiqueta «cuerpo». También agregue el siguiente script en su archivo «index.html».

HTML

<script src="./typed.js-master/lib/typed.min.js">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/
   jquery/3.5.1/jquery.min.js">
</script>
<script>
    if ($(".text-slider").length == 1) {
        var typed_strings = $(".text-slider-items").text();
        var typed = new Typed(".text-slider", {
            strings: typed_strings.split(", "),
            typeSpeed: 50,
            loop: true,
            backDelay: 900,
            backSpeed: 30,
        });
    }
</script>

Debe tener un aspecto como este.

HTML

<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>Typed.js</title>
  
    <!-- Import style.css from root directory -->
    <link rel="stylesheet" href="./style.css" />
</head>
  
<body>
    <div class="heading">
        <h1>GeeksforGeeks</h1>
        <h3>
            <span class="text-slider-items">
                A computer Science portal for 
                geeks, A place to pratice code
            </span>
            <strong class="text-slider"></strong>
  
        </h3>
    </div>
    <!-- Import typed.min.js file from typed.js folder -->
    <script src=
        "./typed.js-master/lib/typed.min.js">
    </script>
      
    <!-- Add jquery cdn -->
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
    </script>
  
    <!-- Add this script for successful 
        implementation of typed.js  -->
    <script>
        if ($(".text-slider").length == 1) {
              
            var typed_strings = 
                $(".text-slider-items").text();
  
            var typed = new Typed(".text-slider", {
                strings: typed_strings.split(", "),
                typeSpeed: 50,
                loop: true,
                backDelay: 900,
                backSpeed: 30,
            });
        }
    </script>
</body>
  
</html>

Inicie el archivo «index.html» y observe el resultado.

Producción:

Publicación traducida automáticamente

Artículo escrito por Malhar_37 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

HTML

HTML

HTML

Deja una respuesta Cancelar la respuesta