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
=
</
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