Tabla de contenido
Una vez más aquí. Hoy vengo a dejar un pequeño ejemplo sobre algo que un usuario me ha preguntado vía correo electrónico cómo podría mostrar diferentes mensajes en su web mediante texto, haciendo que estos se repitiesen en bucle. Esto es algo que en su día hice para otra web que tenía (y que ya no está en funcionamiento), por lo que creo que le podrá servir a este usuario para crear una animación de texto múltiple usando HTML, CSS y un pequeño JavaScript, aun que me imagino que tendrá que adaptarlo a sus necesidades.
Una animación de texto de escritura múltiple significa la animación del texto que cambia automáticamente, utilizando un efecto como el del cursor de un ordenador. En el siguiente ejemplo, veremos un texto fijo en blanco y texto verde que irá cambiando cada pocos segundos. En realidad, las partes con el texto serán constantes, y las palabras de la parte verde se animarán con varios textos.
Animación de texto de escritura múltiple usando HTML CSS y JavaScript
A continuación vamos a ver todo el código HTML, CSS y JavaScript necesario para crear esta animación de texto de escritura múltiple. Antes de ver los archivos de código fuente, debemos conocer algunas explicaciones básicas.
En la pantalla vamos a ver visto dos tipos de texto, uno de color blanco y con características constantes, y otro de color verde que se va a animar para mostrar diferentes textos. El texto animado automáticamente con texto diferente se va a mostrar como un efecto de máquina de escribir (más o menos conseguido). Para animar este texto como una máquina de escribir se utiliza la propiedad de @keyframe animate CSS, y para cambiar el texto se utiliza un poco de JavaScript.
Código del texto de escritura múltiple
Para realizar este ejemplo, como decíamos líneas más arriba, utilizaremos código HTML, CSS y JavaScript para la animación de texto de escritura múltiple. Todos estos código los vamos a utilizar en dos archivos. El primero de ellos es un archivo HTML, que además incluirá el JavaScript, y otro es un archivo CSS.
HTML y JavaScript
La web en HTML de este proyecto es muy sencilla. Tan solo consta de un contenedor en el que tendremos un texto fijo, y otro que será el que vamos a ir cambiando cada pocos segundos utilizando el script de JavaScript que también se incluye en dentro del HTML.
Para esto, dentro de un archivo llamado index.html, tan solo tendremos que pegar el siguiente código.
<!DOCTYPE html>
<html lang="es" dir="ltr">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Texto Animado</title>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<div class="container">
<span class="text first-text">Soy </span>
<span class="text sec-text">ENTREUNOSYCEROS</span>
</div>
<script>
const text = document.querySelector(".sec-text"); //seleccionamos la clase a modificar
const textLoad = () => {
setTimeout(() => {
text.textContent = "Freelance";
}, 0); //1s = 1000 millisegundo
setTimeout(() => {
text.textContent = "Blogger";
}, 4000);
setTimeout(() => {
text.textContent = "Programador";
}, 8000);
setTimeout(() => {
text.textContent = "Youtuber";
}, 12000);
setTimeout(() => {
text.textContent = "entreunosyceros.net";
}, 16000);
}
textLoad();
setInterval(textLoad, 20000); // tiempo total de la animación
</script>
</body>
</html>CSS
El código CSS necesario para llevar a cabo este pequeño ejemplo lo vamos a guardar dentro de un archivo llamado style.css. Dentro de este archivo, solo necesitamos pegar el siguiente código.
/*Quitamos el padding y el margin*/
* {
margin: 0;
padding: 0;
font-family: 'Comic Sans MS', Helvetica, sans-serif;
}
body {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: #000;
overflow: hidden;
}
/*Contenedor del texto*/
.container {
width: 400px;
overflow: hidden;
}
/*Texto que se modifica*/
.container .text {
position: relative;
color: #40F4A8;
;
font-size: 30px;
font-weight: bold;
}
/*Texto fijo*/
.container .text.first-text {
color: #FFF;
}
/*Cursor*/
.text.sec-text:before {
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: #000;
border-left: 2px solid #40F4A8;
;
animation: animate 4s steps(16) infinite;
}
/*Animación*/
@keyframes animate {
40%, 60% {
left: calc(100% + 4px);
}
100% {
left: 0%;
}
}Este ejemplo se puede ver funcionando en el siguiente enlace. El código que se muestra en este ejemplo está enfocado a ser mostrado como una página web (sin mucha utilidad, la verdad sea dicha), pero se puede encajar fácilmente dentro de una web. Así que cada cual que lo coloque donde mejor le vaya.
