Inicio Apuntes FPApuntes DAW Crear animaciones de fundido entrada/salida de texto degradado

Crear animaciones de fundido entrada/salida de texto degradado

Publicado por entreunosyceros
Publicado el: Última actualización:

AVISO: Esta entrada tiene más de dos años desde su publicación. Es posible que el contenido esté desactualizado.

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

degradado textos

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.

También te puede interesar ...

Deja un comentario

* Al utilizar este formulario, aceptas que este sitio web almacene y maneje tus datos.

Resumen de privacidad
cookies entreunosyceros

Esta web utiliza cookies para que podamos ofrecerte la mejor experiencia de usuario posible.

La información de las cookies se almacena en tu navegador y realiza funciones tales como reconocerte cuando vuelves a nuestra web o ayudarnos a comprender qué secciones de la web encuentras más interesantes y útiles.

Nunca almacenamos información personal de ningún tipo.

Tienes toda la información sobre privacidad, derechos legales y cookies en nuestra página sobre la política de privacidad o en la página sobre nuestra política de cookies.

Cookies necesarias

Las cookies estrictamente necesarias tiene que activarse siempre para que podamos guardar tus preferencias de ajustes de cookies.

Si desactivas esta cookie no podremos guardar tus preferencias. Esto significa que cada vez que visites esta web tendrás que activar o desactivar las cookies de nuevo.

Cookies de terceros

Esta web utiliza las siguientes cookies adicionales:

- Mailchimp: Recordar si ya estás suscrito al boletín de noticias y sino ofrecértelo al salir.

- Accesibilidad: Para saber tus ajustes de accesibilidad en cada visita.

- Comentarios: Saber si has leído y aceptado nuestra política de privacidad a la hora de dejar un comentario en la web.

- Google Analytics: Localización para recopilar información anónima tal como el número de visitantes del sitio, o las páginas más populares.

- Goggle Adsense: Anuncios personalizados según tu geolocalización y preferencias.

Dejar estas cookies activadas nos permite mejorar nuestra web.

Adblock Detectado!!

Ayúdanos deshabilitando la extensión AdBlocker de tu navegador para visitar esta web.
Si no sabes hacerlo en Chrome, consulta el siguiente enlace. Si utilizas Firefox, puedes consultar este otro enlace.
Esto mejorará tu experiencia en este sitio web.