jQuery | Complementos de escritura

Typed.js es un complemento de jQuery para darle a nuestro texto un efecto de máquina de escribir. Las diversas características que proporciona typed.js son:

Velocidad de escritura personalizada.
Velocidad de retroceso personalizada.
Se admite bucle (bucle infinito también).

Para usar este complemento, simplemente agregue el enlace CDN justo encima de la etiqueta del cuerpo.
Complementos de escritura de enlace CDN:

<secuencia de comandos src=”https://cdn.jsdelivr.net/npm/typed.js@2.0.11″></secuencia de comandos>

Código HTML: en HTML, acabamos de agregar una etiqueta h1 con estructura normal para realizar los complementos de escritura en jQuery.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0" />
    <title>jQuery | Typing Plugins</title>
</head>
<body>
    <h1 class="geeks"></h1>
</body>
</html>

Código CSS: Para el estilo tenemos que alinear nuestro texto al centro de la página.

<style>
    body {
        margin: 0;
        padding: 0;
    }
    h1 {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 100%;
        text-align: center;
        color: Black;
    }
</style>

Código JavaScript: en JS, tenemos un objeto de TYPED en el que hemos pasado la clase de etiqueta h1. Entonces tenemos un objeto con cuatro atributos. Entendamos cada uno de ellos uno por uno.

string: Se necesita un número N de strings en las que desea que se aplique su efecto. En nuestro caso hemos utilizado dos strings.
typeSpeed: Se utiliza para establecer la velocidad de escritura o aparición del texto.
backSpeed: se utiliza para establecer el retroceso o la velocidad de desaparición del texto.
loop: Es un atributo booleano. Lo hemos establecido en verdadero para repetir el efecto.

Código JS:

<script>
    var typed = new Typed(".geeks", {
        strings: ["Hello!!!", 
        "A Computer Science Portal for Geeks"],
        typeSpeed: 50,
        backSpeed: 50,
        loop: true,
    });
</script>

Solución final: es la combinación de las tres secciones de código anteriores con un enlace CDN.

Programa:

<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0" />
    <title>jQuery | Typing Plugins</title>
  
    <style>
        body {
            margin: 0;
            padding: 0;
        }
  
        h1 {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 100%;
            text-align: center;
            color: Black;
        }
    </style>
</head>
  
<body>
    <h1 class="geeks"></h1>
    <script src=
"https://cdn.jsdelivr.net/npm/typed.js@2.0.11">
    </script>
    <script>
        var typed = new Typed(".geeks", {
            strings: ["Hello!!!",
            "A Computer Science Portal for Geeks"],
              
            typeSpeed: 50,
            backSpeed: 50,
            loop: true,
        });
    </script>
</body>
  
</html>                       

Producción:

Publicación traducida automáticamente

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

Deja una respuesta Cancelar la respuesta