Physical Address
Santo Domingo Este, República Dominicana.
Cómo Hacer Animaciones de Texto Múltiple con HTML, CSS y JavaScript
Hoy en este blog aprenderás a crear animaciones de texto múltiple usando HTML, CSS y JavaScript. También he creado un sitio web con efecto de texto con escritura múltiple.
La animación de texto con escritura múltiple significa la animación del texto que cambia automáticamente como el efecto de máquina de escribir. Este efecto de texto con escritura se está volviendo muy famoso hoy en día. Podemos ver este tipo de efecto en sitios web principalmente.
Echemos un vistazo rápido a la imagen dada de nuestro proyecto [Animación de texto con escritura múltiple]. En la imagen, podemos ver texto blanco y texto azul con la palabra incompleta. En realidad, las partes con el texto serán constantes y las palabras de la parte azul se animarán con múltiples textos.
Para ver la demostración real de esta animación de texto con escritura múltiple y el código HTML, CSS y JavaScript que he usado para crear este proyecto, puedes ver el video tutorial de este proyecto, que se muestra a continuación.
Animación de texto con escritura múltiple mediante HTML, CSS y JavaScript
He proporcionado todo el código HTML CSS y JavaScript que he utilizado para crear esta animación de texto con escritura múltiple. Antes de pasar a los archivos de código fuente, debe conocer algunas explicaciones básicas de este videotutorial.
Como ha visto en el videotutorial sobre la animación de texto con escritura múltiple utilizando HTML CSS y JavaScript. En la pantalla, hemos visto dos tipos de texto: uno es de color blanco con características constantes y otro es de color azul con una característica animada. Además, hemos visto la parte azul del texto animada automáticamente con un texto diferente como un efecto de máquina de escribir. Para animar este texto como una máquina de escribir, he utilizado la propiedad de animación CSS y para cambiar el texto he utilizado algo de JavaScript.
Espero que ahora pueda crear este tipo de proyecto [Animación de texto con escritura múltiple] fácilmente. Si tiene dificultades para crear, he proporcionado todo el código fuente a continuación.
Texto de escritura múltiple [Código fuente]
Para obtener el siguiente código HTML, CSS y JavaScript para la animación de texto con escritura múltiple, debe crear dos archivos: uno es un archivo HTML y el otro es un archivo CSS. Después de crear estos dos archivos, puede copiar y pegar los códigos proporcionados en su documento. También puede descargar todos los archivos de código fuente desde el botón de descarga proporcionado.
HTML
<!DOCTYPE html>
<!-- Coding By Yodeimi Gomez- yodeimigomez.com -->
<html lang="en">
<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">
<!----======== CSS ======== -->
<link rel="stylesheet" href="style.css">
<!--<title>Typing Text Animation</title>-->
</head>
<body>
<div class="container">
<span class="text first-text">I'm a</span>
<span class="text sec-text">Freelancer</span>
</div>
<script>
const text = document.querySelector(".sec-text");
const textLoad = () => {
setTimeout(() => {
text.textContent = "Freelancer";
}, 0);
setTimeout(() => {
text.textContent = "Blogger";
}, 4000);
setTimeout(() => {
text.textContent = "YouTuber";
}, 8000); //1s = 1000 milliseconds
}
textLoad();
setInterval(textLoad, 12000);
</script>
</body>
</html>CSS
/* ===== Google Font Import - Poppins ===== */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: #010718;
overflow: hidden;
}
.container{
width: 246px;
overflow: hidden;
}
.container .text{
position: relative;
color: #4070F4;
font-size: 30px;
font-weight: 600;
}
.container .text.first-text{
color: #FFF;
}
.text.sec-text:before{
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: #010718;
border-left: 2px solid #4070F4;
animation: animate 4s steps(12) infinite;
}
@keyframes animate{
40%, 60%{
left: calc(100% + 4px);
}
100%{
left: 0%;
}
}
