FONDOS DE TEXTO ANIMADO EN MOVIMIENTO

Un fondo de texto animado convierte una banda plana en un telón vivo. El Muro de movimiento repite en mosaico tu propia tipografía de titulares, o tus fotos, sobre un campo en movimiento detrás del contenido, con más de veinte movimientos configurados desde un panel y sin código.

Más que un fondo

La mayoría de los fondos se quedan quietos: un color, una foto, un degradado. 

Un titular desplazable, sin renderizado

El muro de desplazamiento es una marquesina: filas de texto se deslizan hacia los lados y se repiten, el clásico fondo de texto en movimiento. La mayoría de las personas crean una marquesina con una animación CSS o un fragmento de texto con desplazamiento infinito copiado de codepen, y luego lo mantienen manualmente. En el constructor de páginas de Instinctor, el Muro de movimiento es una configuración en cualquier sección, por lo que este fondo de texto animado se ejecuta en vivo detrás de tu contenido sin CSS que mantener ni nada que instalar.

Un telón de fondo en movimiento, sin código

Drift convierte el muro en una marquesina vertical lenta: el texto se desplaza hacia arriba y se repite, un fondo de texto en movimiento más tranquilo para una sección que debe respirar en lugar de gritar. Donde normalmente escribirías una animación CSS con fotogramas clave o añadirías un widget de texto desplazable, aquí es un control de velocidad. El fondo de texto animado se sitúa detrás de tu texto, se configura desde un panel, y sigue funcionando después de una actualización porque no hay fragmento que romper.

Tu trabajo, siempre en movimiento

El mismo muro muestra tus fotos en lugar de texto, un fondo de imagen en movimiento hecho de tu propio trabajo. Esto es lo que la gente entiende por fondo animado o fondo en movimiento detrás de una sección, generalmente creado con un plugin de presentación de diapositivas, un bucle de vídeo o un bloque de CSS. En el constructor de páginas de Instinctor es una configuración: apunta el Muro de movimiento a tus imágenes, y el fondo de imagen en movimiento se desplaza detrás de tu texto, sin archivo de vídeo y sin plugin.

Profundidad en capas, sin diseñador

Un fondo de texto en capas donde la tipografía se apila y se desplaza en profundidad. Los efectos como este suelen ser un montón de modos de mezcla CSS e índice z, o un fondo animado que pegas desde codepen y esperas que sobreviva a la siguiente edición. Como Muro de movimiento, es una opción única en la sección, por lo que el fondo de texto animado es parte de la página en lugar de un script añadido, y las palabras siguen siendo texto real y rastreable.

Una palabra sin tono

Movimiento que detiene el desplazamiento

Lanes es una marquesina diagonal: las filas se inclinan y avanzan rápidamente en direcciones alternas. Es el tipo de fondo de texto en movimiento que la gente busca como marquee text css o un efecto de texto desplazable infinito, y que reconstruye cada vez que se actualiza un tema. En Instinctor es un movimiento del Muro de movimiento, configurado en cualquier sección, para que el fondo de texto animado sea rápido y legible sin JavaScript ni plugins de desplazamiento de texto que mantener.

Tu portfolio pasando a toda velocidad

En modo imagen, Lanes hace avanzar tus fotos en diagonal, un fondo de imagen en movimiento en lugar de un fondo de texto en movimiento. Hacer esto con una marquesina de imágenes normalmente requiere un plugin de carrusel o una animación CSS construida manualmente. En el Muro de movimiento es un movimiento apuntado a tu biblioteca de imágenes, por lo que el fondo animado es una configuración de la sección, se mantiene ligero y muestra tu trabajo real en lugar de relleno de stock.

Parece que un estudio lo hizo

Zoom crea una zambullida infinita: el muro se amplía y se desvanece en sí mismo para crear un fondo de texto en movimiento que da la sensación de caer hacia adelante. Construir esto manualmente significa transformaciones CSS apiladas o un fondo animado de una demostración de codepen. Aquí es una sola opción del Muro de movimiento en la sección, por lo que el fondo de texto animado se renderiza en vivo en el navegador, no penaliza la velocidad de la página y no requiere mantener código.

Cae en tu propio trabajo

Zoom en modo imagen se sumerge infinitamente a través de tus fotos, un fondo de imagen animado que da la sensación de caer en el trabajo. La gente construye un fondo en movimiento como este con un vídeo en bucle o transformaciones CSS apiladas. Aquí es una sola opción del Muro de movimiento: elige imágenes, elige zoom, y el fondo de imagen en movimiento se ejecuta en vivo detrás de la sección sin vídeo que alojar ni plugin que mantener.

Texto 3D sin After Effects

Tilt inclina todo el muro hacia un plano 3D poco profundo, un fondo de texto en movimiento con sensación de profundidad. Normalmente eso es una transformación CSS 3D que ajustas manualmente, o un widget de fondo animado de pago. En el Muro de movimiento es una opción en cualquier sección, por lo que el fondo de texto animado es parte del constructor de páginas en lugar de un fragmento, y la tipografía detrás de tu contenido sigue siendo texto seleccionable e indexable.

Tus fotos, inclinadas en 3D

Una galería inclinada: tus fotos se inclinan hacia un plano 3D superficial y flotan, un fondo de imagen en movimiento con profundidad. Normalmente eso es una transformación CSS 3D y un script de presentación de diapositivas, o un widget de fondo animado de pago. En el Muro de movimiento es una opción en la sección, así que el fondo de imagen animado es parte del constructor de páginas, se renderiza en vivo y muestra tu trabajo detrás del texto.

Un ticker en vivo, integrado

El tambor gira el texto alrededor de un eje horizontal, un fondo de texto en movimiento que gira como un ticker. La gente recurre a un generador de marquesina, un banner de texto desplazable o una animación CSS 3D para esto. En Instinctor, el Muro de movimiento lo hace como una configuración en la sección: escribe las palabras, elige el tambor, establece la velocidad y el fondo de texto animado se ejecuta en vivo sin nada que exportar ni plugin que actualizar.

Tu trabajo en un carrete giratorio

El tambor gira tus fotos alrededor de un eje horizontal, un fondo de imagen en movimiento que gira como un carrete. Recrearlo significa una animación CSS 3D y una presentación de diapositivas, o una exportación de vídeo. En el Muro de movimiento es una configuración en la sección: elige imágenes, elige el tambor, establece la velocidad y el fondo de imagen en movimiento se reproduce en vivo sin archivo de vídeo ni plugin que mantener actualizado.

Movimiento bicolor en un clic

Cross ejecuta dos marquesinas cruzadas entre sí en dos tintas, un fondo de texto en movimiento más intenso para una sección más llamativa. Construido a mano, son dos animaciones CSS superpuestas y combinadas por color manualmente, o un banner de texto desplazable que compras e insertas. Como Muro de movimiento, es un movimiento con un segundo color, configurado en la sección, así que el fondo de texto animado permanece como una capa única y ligera, rastreable, en lugar de una pila de widgets.

Stickers dispersa etiquetas giradas que flotan por el fotograma, un fondo de texto en movimiento desenfadado. Este es el tipo de cosa que la gente ensambla a partir de CSS posicionado absolutamente o un banner de Canva exportado como imagen. En el Muro de movimiento es una única opción en la sección y permanece como texto en vivo, así que el fondo de texto animado es texto real e indexable en lugar de un gráfico aplanado que los motores de búsqueda no pueden leer.

Tu trabajo, disperso y vivo

Stickers dispersa tus fotos como fichas flotantes y giradas, un fondo de imagen en movimiento desenfadado. Normalmente es un collage CSS posicionado de forma absoluta o una exportación de Canva guardada como una imagen plana. En el Muro de movimiento permanece como una capa viva de imágenes separadas, por lo que el fondo animado se actualiza cuando cambias una foto, sin gráficos aplanados ni plugins, configurado desde el panel de sección.

Tu trabajo enmarca la página

Un muro audaz sin código

Bricks agrupa el texto en un denso mosaico de fichas, una sí y otra no invertidas, y desplaza todo el campo. Es el fondo de texto en movimiento más audaz del conjunto, el tipo de fondo animado que la gente busca en codepen. En el constructor de páginas de Instinctor es un movimiento con un segundo color que contrasta, establecido en la sección, por lo que el fondo de texto animado se incluye con la página y nunca necesita una actualización de plugin.

Movimiento hipnótico en un clic

Vortex arremolina el campo hacia adentro, un fondo de texto en movimiento que atrae la vista hacia un punto central. Recrearlo requiere CSS personalizado o JavaScript y mucho ajuste, o un fragmento de fondo animado que heredas y no puedes cambiar fácilmente. Como Muro de movimiento, es una opción en cualquier sección, por lo que el fondo de texto animado es una configuración que ajustas en un panel, y las palabras permanecen como texto vivo y legible.

Tu trabajo atrayéndolos

Vortex arremolina tus fotos hacia adentro, un fondo de imagen en movimiento que atrae la vista hacia un punto central. Recrearlo requiere WebGL o mucho JavaScript personalizado. Como Muro de movimiento, es una opción en la sección, por lo que el fondo de imagen animado es una configuración que ajustas en un panel, se renderiza en vivo en el navegador y muestra tu trabajo real en lugar de un bucle de stock.

La textura, sin renderizar

Static mantiene el muro inmóvil: la tipografía en mosaico sin movimiento, para cuando quieres la textura de un fondo de texto animado pero una sección tranquila. Es un patrón que de otro modo construirías con un fondo CSS repetido o una imagen en mosaico. Aquí es el mismo Muro de movimiento con movimiento desactivado, por lo que el fondo de texto permanece como palabras reales en la página y puedes activar el movimiento nuevamente con un control.

Tu trabajo, fijado detrás de todo

Static en modo imagen fija tus fotos en una cuadrícula estática, un fondo de foto con la textura de un fondo de imagen en movimiento pero una sección tranquila. Es lo que de otro modo construirías con una cuadrícula CSS de imágenes de fondo. Aquí es el mismo Muro de movimiento con movimiento desactivado, por lo que mantienes tus propias imágenes detrás del texto y puedes volver a activar el movimiento con un control.

Perspectiva, sin software 3D

Funnel hace converger las filas hacia un punto de fuga, un fondo de texto en movimiento con perspectiva. Normalmente esto es un conjunto de transformaciones CSS o un boceto WebGL de codepen. En el Muro de movimiento es una única opción en la sección, por lo que el fondo de texto animado es parte del constructor de páginas, se renderiza en vivo y mantiene la tipografía detrás de tu texto como texto rastreable e indexable en lugar de un gráfico incrustado.

Un banner que nunca se detiene

Banner cruza la sección con una franja inclinada de texto en movimiento, la versión diagonal de un banner de texto desplazable. Hay quien compra un generador de banners de texto desplazable o un widget de Elementor para esto. En Instinctor, el Motion Wall lo hace como un ajuste en cualquier sección, así que el fondo de texto animado viene integrado, se mantiene rápido y nunca depende de un plugin de banners de terceros que puede romperse con la próxima actualización.

Un acabado de imprenta vivo en la página

Overprint superpone dos colores del mismo texto ligeramente desplazados: un fondo de texto en movimiento con un aire impreso, de risografía. Hecho a mano, es CSS en capas con modos de fusión; descargado, es un fondo animado que no puedes cambiar de color fácilmente. En el Motion Wall es un solo movimiento con una segunda tinta, configurado en la sección, así que puedes reajustar el fondo de texto animado desde un panel y sigue siendo texto real e indexable.

Profundidad WebGL, sin WebGL

Coils hace subir el texto por columnas en hélice vertical, un fondo de texto en movimiento muy elaborado. Es el tipo de fondo animado que se ve en un codepen con WebGL o en una exportación de After Effects. En el constructor de páginas de Instinctor es una sola opción de la sección, renderizada en vivo en el navegador, así que el fondo de texto animado apenas afecta a la velocidad de la página y no necesita ninguna biblioteca, plugin ni código que mantener.

Texto en una curva, sin JavaScript

Snake hace avanzar la línea por un recorrido sinuoso, un fondo de texto en movimiento que se lee como una marquesina que sigue una curva. Hacerlo a mano significa trazados SVG y JavaScript, o un efecto de texto desplazable sacado de codepen. En el Motion Wall es un solo movimiento de la sección, así que el fondo de texto animado es un ajuste y no un script, y las palabras siguen siendo texto seleccionable e indexable en la página publicada.

Texto en círculo, sin trabajo en SVG

Rings coloca el texto en círculos concéntricos que giran en sentidos opuestos, una versión circular de un fondo de texto en movimiento. Recrearlo significa SVG textPath y animación a medida, o un fondo animado que copias y no puedes editar. En el Motion Wall es una sola opción en cualquier sección, así que este fondo de texto animado forma parte del constructor de páginas, se renderiza en vivo y mantiene el texto como palabras reales y rastreables.

Movimiento suave, sin nada que codificar

Wave lanes hace fluir las filas por suaves trayectorias sinusoidales, un fondo de texto en movimiento más suave que una marquesina recta. Hecho a mano, es CSS con keyframes o un boceto en canvas. En el Motion Wall es un solo movimiento de la sección, así que el fondo de texto animado es un control que ajustas en un panel, se mantiene rápido y no necesita ningún plugin de texto desplazable ni animación escrita a mano para seguir funcionando.

Una onda que nunca codificaste

Wave stack hace recorrer una onda por filas de texto a todo lo ancho, un fondo de texto en movimiento que ondula. Es el tipo de fondo animado que la gente busca como texto ondulado en CSS o como efecto de codepen. En Instinctor es una sola opción del Motion Wall en la sección, así que el fondo de texto animado se renderiza en vivo, se mantiene ligero y el texto detrás de tu contenido sigue siendo palabras reales e indexables, no una imagen aplanada.

Letras que respiran por sí solas

Weight walk anima el grosor del trazo a lo largo de las letras, de fino a grueso y de vuelta, un sutil fondo de texto en movimiento basado en una fuente variable. Programado a mano, es font-variation-settings y keyframes; comprado, es un widget que no puedes reajustar. En el Motion Wall es un solo movimiento de la sección, así que el fondo de texto animado es un ajuste en un panel y mantiene las letras como texto vivo y rastreable.

Un fondo que el cursor revela

El efecto foco oculta el muro casi por completo y deja que el fondo de texto en movimiento se ilumine solo donde se mueve el cursor. Hecho a mano, es una máscara controlada por JavaScript y eventos del ratón. En el Motion Wall es un solo interruptor de la sección, así que el fondo de texto animado es un efecto interactivo que activas en un panel, sin código ni plugins, y el texto de debajo sigue siendo legible.

Todos los controles del panel

Tú defines el texto, el tamaño, el grosor y la velocidad. Un color se lee como un susurro; añade un segundo y los modos de dos tintas los enfrentan a propósito. El parallax desplaza el muro contra el cursor para dar profundidad, y todo puede ocultarse en el teléfono, donde solo llenaría la pantalla.

Energía, no decoración

Una sección estática le pide al lector que ponga el interés. Un muro en movimiento se lo pone: la mirada capta la deriva, la sección parece pensada, y el texto en primer plano toma prestada esa energía sin gritar. Usado una sola vez, sobre un titular que pueda sostenerlo, es la forma más barata de que una página parezca producida y no publicada sin más.

¿Qué es un fondo de texto animado?

Un fondo de texto animado es exactamente lo que parece: un fondo hecho de tipografía en movimiento. En lugar de un color plano o una foto fija, una palabra o una frase corta se repite en mosaico por toda la sección y se pone en movimiento detrás de tu contenido, atenuada lo justo para seguir siendo un telón. Le da a una banda sosa una sensación de energía antes de que se lea una sola palabra del texto.

Los diseñadores suelen construir esto a mano con CSS o exportando un vídeo. Instinctor lo convierte en un ajuste: activa el Muro de movimiento en cualquier sección, elige el texto o tus propias imágenes, escoge un movimiento y unos colores, y se renderiza en vivo en la página. El fondo en movimiento es HTML real y ligero, así que la página sigue rápida y el texto que tiene delante sigue legible y amigable para los buscadores.

Preguntas sobre fondos de texto animado

Mira qué más hace

El Muro de movimiento es una de las cuarenta formas en que Impulse se mueve. Todos los bloques están hechos igual.

Tu trabajo, pasando

El muro de desplazamiento en modo imagen hace pasar tus fotos en una marquesina, un fondo de imagen en movimiento hecho de trabajo real. Este es el fondo animado que la gente crea con una marquesina de imágenes, un plugin de presentación de diapositivas o un vídeo en bucle. En el Muro de movimiento es una configuración en la sección: apunta a tus imágenes, elige desplazamiento, y el fondo de imagen en movimiento se ejecuta en vivo detrás de tu contenido sin nada que alojar ni plugin que instalar.