Un factor importante del diseño de un sitio web es la elección de fuente y el estilo de tipografía que seleccione. Esto puede ser fácilmente una situación decisiva. Las fuentes llaman la atención muy rápidamente y pueden atraer al usuario o alejarlo, por lo que es importante tomar la decisión correcta.
Sin embargo, las fuentes y la tipografía no tienen que ser estáticas. Puede introducir efectos de texto CSS en su sitio web para ayudarlo a destacar. Cosas como desplazamiento de texto, sombras, brillo de texto, estilo, color, efecto 3D y muchas más.
En este artículo nos centraremos en Animaciones de texto CSS. Estos son simples y fáciles de integrar en su diseño, con HTML puro, CSS y (en algunos de ellos) algo de JavaScript. Puede usarlos en sitios web de animación de desplazamiento.
15 asombrosas animaciones de texto con CSS
Estas animaciones de texto CSS se pueden utilizar para Haz que tu página web sea más interesante y dale un diseño y una sensación únicos. Sin embargo, debe tener cuidado, no todos estos efectos de texto CSS beneficiarán a todos los diseños. Por ejemplo, con un diseño minimalista, es posible que desee elegir un efecto más sutil (solo revise estos temas minimalistas de WordPress y descubrirá fácilmente que podrían arruinar su diseño limpio)
Sin embargo, debe haber un diseño aquí que se ajuste a las necesidades y expectativas de cada usuario para mejorar su diseño y apariencia. mira estos 15 codepens CSS de animación de texto que hemos seleccionado para ti.
1. Animación de texto de disparador de desplazamiento
Un gran ejemplo de cómo puede aprovechar la animación de texto CSS que se activa cuando un usuario se desplaza. Este usa un disparador tanto para desplazarse hacia arriba como hacia abajo, por lo que la animación siempre funcionará en cualquier dirección.
Las animaciones activadas por desplazamiento son perfectas para sitios web de una página.
Y si está buscando animaciones de activación de desplazamiento, este artículo sobre Cómo crear animaciones CSS en Scroll podría ser muy útil para usted.
2. Efecto de animación de color de texto (Solo CSS)
Este es solo HTML y CSS puro, por lo que será muy fácil de usar y no requiere JavaScript. Envía una transición colorida de diferentes colores a través del texto usando un degradado, dando una apariencia muy moderna.
Puede cambiar fácilmente los colores elegidos para que se ajusten a su propia marca alterando los códigos hexadecimales en el CSS.
3. Cambio de color CSS estático
Genial para un título grande, este cambia el color de cada palabra sin ninguna transición. Este efecto de texto CSS puede ser útil si tiene un diseño minimalista y no quiere que las cosas se vean demasiado recargadas.
Hecho puramente con HTML y CSS, puede cambiar fácilmente los colores y la velocidad de la animación. Pruébelo usted mismo modificando el CSS del codepen.
4. Efecto de texto CSS que se transforma
Una animación más avanzada que está hecha con HTML puro, CSS y JavaScript. Como puede ver en el codepen CSS de animación de texto, puede hacer animaciones más avanzadas cuando agrega un poco de JavaScript. Sin embargo, este sigue siendo relativamente fácil de editar y moldear a tu marca o estilo.
5. Rebote con animación de texto de reflexión (Solo CSS)
Un efecto de texto CSS que rebota que tiene un reflejo, hecho solo con HTML y CSS, lo que lo hace muy portátil en diferentes sitios web.
Utiliza un elemento HTML de intervalo para colocar cada letra en una fila y rebota cada una durante la animación del texto, así que tenga cuidado donde la coloca.
6. Animación de texto de onda de agua (Solo CSS)
Un efecto de texto CSS de agua tranquila, anima el efecto de una ola tranquila dentro del texto. Excelente para una variedad de títulos diferentes en un sitio web, realmente podría hacer que se destaque.
Este solo usa HTML y CSS, por lo que es fácil trabajar con él.
7. Crossing On Scroll Efecto de texto CSS
Si está buscando algo para activar una animación de texto, una animación en desplazamiento como esta puede serle útil. Utiliza HTML, CSS y JavaScript para lograr esto. La animación es ligera y muy fluida. Desplazar las letras individualmente también podría agregar más valor a este efecto de texto CSS.
8. Cargando estilo CSS Animación de texto
Parece una barra de progreso de carga pero en forma de fuente. Cambia el texto a lo que quieras y usa esta animación única. Puede cambiar fácilmente los colores de la animación de texto en el codepen CSS.
9. Animación de texto invertido (Solo CSS)
Se puede usar como una animación de carga cuando se espera una respuesta en una página web, hecha solo con HTML y CSS. El texto se voltea de izquierda a derecha y es una animación muy fluida.
10 Fundido en animación de texto (Solo CSS)
Una animación de texto sutil (CSS) que se desvanece cuando se carga la página. Animación muy suave y tiene un sutil efecto de desenfoque al aparecer. Hecho con HTML puro y CSS.
11 Animación de crecimiento de texto 3D
Animación de texto (CSS) con efecto 3D que crece hacia arriba y hacia abajo. Una animación muy divertida y atractiva de usar.
12 Animación de texto de Blobs animados (Solo CSS)
Una animación de texto CSS muy sutil con un fondo colorido y un tipo de fuente atractivo. Hecho con HTML puro y CSS, es fácil cambiar los colores y el tipo de fuente para que se adapte a su marca y estilo.
13 Animaciones de texto básico (Solo CSS)
Si está buscando animaciones de texto reutilizables básicas (CSS puro) que se puedan usar rápidamente en muchos lugares de una página web, estas son para usted. Hechos solo con HTML y CSS, son fáciles de editar y aprender.
14 Carrusel de animación de texto deslizante (Solo CSS)
Una animación de texto CSS pegadiza y atractiva, ideal para el título principal de una página web. Recorre diferentes palabras y tiene un efecto de animación deslizante para hacer la transición entre cada palabra. Hecho con HTML puro y CSS, por lo que es fácil trabajar con él y editarlo.
15. Escribir animación de texto
Una excelente manera de mostrar una variedad de palabras u oraciones en una pantalla en un área. El efecto de texto CSS de escritura se ve muy bien para muchos diseños y utiliza una animación fluida. Hecho con HTML, CSS y JavaScript, pero es excelente para aprender y es fácil editar las palabras que necesita usar.
Conclusión
Las animaciones de texto CSS son geniales, ayudan a crear un espacio atractivo para los visitantes y ayudan a llamar la atención hacia un lugar determinado. Pueden encajar muy bien en sitios web de una página con secciones de pantalla completa, creando un diseño muy atractivo para el usuario. Estoy pensando en sitios web de aterrizaje de productos, páginas de compresión, etc.
La biblioteca FullPage.js es la herramienta perfecta para crear este tipo de sitio web a pantalla completa. Está disponible para constructores de WordPress como Elementor y Gutenberg. Agregue una de estas animaciones de texto CSS en modo de pantalla completa y estoy seguro de que el resultado será prometedor. Por ejemplo, como explicamos en la primera animación de texto CSS, la animación activada por desplazamiento encaja muy bien en un sitio web de una página con varias secciones.
Sin embargo, puede ser difícil elegir la animación correcta, no todas las animaciones funcionarán bien en todos los diseños, así que asegúrese de preguntarse si la animación está demasiado ocupada y tal vez opte por una más sutil. Tampoco abuses de los efectos de texto CSS, hará que la página se vea vulgar y repleta de animaciones.
Artículos relacionados
Sobre el Autor:
lucas embrey es un desarrollador full-stack, BSc en Ciencias de la Computación y con sede en el Reino Unido.
Puedes saber más sobre él en https://lukeembrey.com/
