Una vez más aquí. Hoy vengo a dejar un artículo rápido por que un usuari@ me ha pedido ayuda para crear animaciones de fundido entrada/salida de texto. El caso es que hace ya algunos años, hice algo así para un proyecto que realicé mientras estudiaba. Esto en su día lo hice utilizando algunas reglas de CSS con un poco de HTML, y es lo que vamos a ver a continuación.
El caso es que el usuario que se puso en contacto conmigo por el formulario de contacto de esta web, me pidió ayuda para crear una animación elegante de entrada/salida de texto degradado, como las que se pueden ver en la página de Apple iPhone 14 Pro. Evidentemente que nadie se espere una animación tal cual a la que aparece en esta página, pero si se parece bastante a la animación que aparece en algunos de los texto.
Crear animaciones de fundido entrada/salida de texto degradado
Como decía, para crear este ejemplo, solo es necesario crear un archivo llamado index.html y dentro vamos a pegar el siguiente código HTML con sus correspondientes reglas CSS, para animar la aparición del texto.
<!DOCTYPE html>
<html lang="es">
<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>Degradado</title>
<style type="text/css">
body {
background-color: black;
}
.texto p {
position: relative;
width: 60vw;
font-size: 50px;
color: transparent;
line-height: 2;
padding: 20px;
margin: auto;
background: linear-gradient(
transparent,
transparent 25%,
#b3a7fa,
#4c00ff,
transparent 75%,
transparent
);
-webkit-background-clip: text;
background-clip: text;
background-size: 100% 500%;
background-position: center 0;
-webkit-animation: textScroll 5s infinite linear alternate;
animation: textScroll 5s infinite linear alternate;
}
@-webkit-keyframes textScroll {
100% {
background-position: center 100%;
}
}
@keyframes textScroll {
100% {
background-position: center 100%;
}
}
</style>
</head>
<body>
<div class="texto">
<p>
Un ejemplo creado en entreunosyceros.net. Este ejemplo es un degradado
creado con CSS3 que funciona sobre texto. En este ejemplo se puede ver un texto
que va cambiando de color y desapareciendo mediante un fundido a negro.
<br />
</p>
</div>
</body>
</html>
Como se puede ver el código no está comentado, pero tampoco tiene mucha complicación para cualquiera que sepa un poco de CSS y HTML. El resultado final, si ejecutamos el archivo en el que acabamos de guardar el código anterior, deberíamos ver algo como lo que se puede ver en la demostración del código.
Espero que esto pueda serle de ayuda al usuari@ que me preguntaba cómo hacer algo como esto. Como dije más arriba, no es exactamente igual a lo que me pedía, pero puede ser un comienzo.