Text-reveal es un tipo de efecto en el que todos los alfabetos del texto se revelan uno a uno de forma animada. Hay innumerables formas de animar texto para este efecto. Depende de tu creatividad cómo quieres que se revele el texto. Veremos una forma básica y fácil de empezar.
Enfoque: el enfoque consiste en utilizar fotogramas clave para animar fotogramas y revelar lentamente el texto por fotogramas.
Código HTML: En HTML, hemos usado la etiqueta <h1> envuelta dentro de una etiqueta <div>.
html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> <title>Text Reveal Animation</title> </head> <body> <div class="geeks"> <h1>GeeksforGeeks</h1> </div> </body> </html>
Código CSS: Para CSS, siga estos pasos:
- Paso 1: Primero, hemos realizado algunos estilos básicos, como proporcionar un color de fondo, alinear el texto al centro, etc.
- Paso 2: luego use la propiedad de animación con el identificador llamado animate .
- Paso 3: ahora use fotogramas clave para animar cada fotograma y establezca diferentes alturas y anchos para cada fotograma.
Sugerencia: puede cambiar el valor de alto y ancho utilizado en cada marco para revelar el texto de una manera diferente.
CSS
<style>
body {
background: green;
}
.geeks {
width: 20%;
top: 50%;
position: absolute;
left: 40%;
border-bottom: 5px solid white;
overflow: hidden;
animation: animate 2s linear forwards;
}
.geeks h1 {
color: white;
}
@keyframes animate {
0% {
width: 0px;
height: 0px;
}
30% {
width: 50px;
height: 0px;
}
60% {
width: 50px;
height: 80px;
}
}
</style>
Código completo: es la combinación de las dos secciones de códigos anteriores.
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>Text Reveal Animation</title>
<style>
body {
background: green;
}
.geeks {
width: 20%;
top: 50%;
position: absolute;
left: 40%;
border-bottom: 5px solid white;
overflow: hidden;
animation: animate 2s linear forwards;
}
.geeks h1 {
color: white;
}
@keyframes animate {
0% {
width: 0px;
height: 0px;
}
30% {
width: 50px;
height: 0px;
}
60% {
width: 50px;
height: 80px;
}
}
</style>
</head>
<body>
<div class="geeks">
<h1>GeeksforGeeks</h1>
</div>
</body>
</html>
Producción:
Un método animado más
Código HTML: el siguiente fragmento de código crea un elemento div HTML que contiene el texto para modificar.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Collecting Data</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous"> </head> <body class="container" style="margin-top: 50px; width: 50% height:auto; "> <div class="text-typing"> <p>Geeks For Geeks </p> </div> </html>
Código CSS: Para CSS, siga estos pasos:
Paso 1: Primero, hemos realizado algunos estilos básicos, como proporcionar un color de fondo, alinear elementos al centro, etc.
Paso 2: luego use la propiedad de animación con el identificador denominado como escritura de texto p.
Paso 3: ahora use fotogramas clave para animar desde el ancho 0 al 100%.
HTML
<style >
body {
margin:0px;
height:100vh;
display:flex;
align-items:center;
justify-content:center;
background:#ddd;
}
.text-typing {
padding:20px 30px;
background:#f5f5f5;
font-size:35px;
font-family:monospace;
border-radius:50px;
}
.text-typing p {
margin:0px;
white-space:nowrap;
overflow:hidden;
animation:typing 4s steps(22,end) forwards,
blink 1s infinite;
}
@keyframes typing {
0% { width:0% }
100% { width:100% }
}
@keyframes blink {
0%,100% {
border-right:2px solid transparent;
}
50% {
border-right:2px solid #222;
}
}
</style>
Código completo: es la combinación de las dos secciones de códigos anteriores.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Collecting Data</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<style >
body {
margin:0px;
height:100vh;
display:flex;
align-items:center;
justify-content:center;
background:#ddd;
}
.text-typing {
padding:20px 30px;
background:#f5f5f5;
font-size:35px;
font-family:monospace;
border-radius:50px;
}
.text-typing p {
margin:0px;
white-space:nowrap;
overflow:hidden;
animation:typing 4s steps(22,end) forwards,
blink 1s infinite;
}
@keyframes typing {
0% { width:0% }
100% { width:100% }
}
@keyframes blink {
0%,100% {
border-right:2px solid transparent;
}
50% {
border-right:2px solid #222;
}
}
</style>
</head>
<body class="container" style="margin-top: 50px; width: 50% height:auto; ">
<div class="text-typing">
<p>Geeks For Geeks </p>
</div>
</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