En este artículo, implementaremos una animación de revelación de texto deslizante que se puede usar en portafolios personales, sitios web e incluso en videos de introducción de YouTube para agregar una ventaja adicional a nuestros videos para que se vean más interesantes y llamativos en primera instancia y el La mejor parte es que lo haremos usando solo HTML y CSS.
Planteamiento: La animación comenzará con la aparición del primer texto, por ejemplo, estamos tomando la palabra como “GEEKSFORGEEKS”, y luego se deslizará hacia la izquierda, y nuestro segundo texto que es: “A Computer Science Portal For Geeks”. ” se revelará hacia la derecha (si todavía está confundido, de qué se trata la animación, puede desplazarse rápidamente hasta el final de la página y ver el resultado, para una mejor comprensión).
Usaremos diferentes fotogramas clave para dividir nuestra animación en diferentes etapas para que funcione sin problemas.
Los fotogramas clave contienen los estilos que tendrá el elemento en determinados momentos. Se utilizan los siguientes fotogramas clave:
- Aparecen @keyframes: En este keyframe, nos ocuparemos de la forma en que aparece el primer texto.
- @keyframes slide: En este keyframe intentaremos mover el texto de forma deslizante.
- Revelación de @keyframes: En este keyframe, revelaremos nuestro segundo texto.
A continuación se muestra la implementación del enfoque anterior.
Ejemplo: En este ejemplo, utilizaremos las propiedades definidas anteriormente para crear la animación.
index.html
<!DOCTYPE html>
<html>
<head>
<title>Text Reveal Animation</title>
</head>
<style>
@import url(
'https://fonts.googleapis.com/css2?family=Montserrat:wght@600&display=swap');
body{
font-family: Montserrat;
text-align: center;
color: #006600;
font-size: 34px;
padding-top: 40vh;
overflow: hidden;
}
div{
display: inline-block;
overflow: hidden;
white-space: nowrap;
}
div:first-of-type{
animation: appear 6s infinite;
}
div:last-of-type{
animation: reveal 6s infinite;
}
div:last-of-type span{
font-size: 33px;
color: #808000;
animation: slide 6s infinite;
}
@keyframes appear{
0%{opacity: 0;}
20%{opacity: 1;}
80%{opacity: 1;}
100%{opacity: 0;}
}
@keyframes slide{
0%{margin-left:-800px;}
20%{margin-left:-800px;}
35%{margin-left:0px;}
100%{margin-left:0px;}
}
@keyframes reveal{
0%{opacity: 0; width: 0px;}
20%{opacity: 1; width: 0px;}
30%{width: 655px;}
80%{opacity: 1;}
100%{opacity: 0; width: 655px;}
}
</style>
<body>
<div>GEEKSFORGEEKS</div>
<div>
<span>A Computer Science Portal For Geeks</span>
</div>
</body>
</html>
Producción:
Nota: Para otros textos de diferentes longitudes, el ancho y el tamaño de fuente de ambos textos deben cambiarse en consecuencia.
Publicación traducida automáticamente
Artículo escrito por tausifsiddiqui y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA