FUNDOS DE TEXTO ANIMADO EM MOVIMENTO

Um fundo de texto animado transforma uma faixa comum em um cenário vivo. O Motion Wall repete a sua própria tipografia de destaque, ou suas fotos, em um campo em movimento atrás do conteúdo, com mais de vinte movimentos definidos em um painel e sem código.

Mais que um fundo

A maioria dos fundos fica parada: uma cor, uma foto, um degradê. 

Um título em movimento, sem renderização

A parede Scroll é um letreiro rolante: linhas de texto deslizam para o lado e se repetem, o clássico fundo de texto em movimento. A maioria das pessoas monta um letreiro rolante com uma animação em CSS ou um trecho de código de texto com rolagem infinita copiado do CodePen, e depois o mantém à mão. No construtor de páginas do Instinctor, o Motion Wall é uma configuração de qualquer seção, então este fundo de texto animado roda ao vivo atrás do seu conteúdo, sem CSS para manter e nada para instalar.

Um pano de fundo em movimento, sem código

Drift transforma a parede em um letreiro rolante vertical e lento: o texto sobe devagar e se repete, um fundo de texto em movimento mais tranquilo para uma seção que deve respirar em vez de gritar. Onde normalmente você escreveria à mão uma animação com keyframes em CSS ou adicionaria um widget de texto rolante, aqui é um controle de velocidade. O fundo de texto animado fica atrás do seu texto, ajustado em um painel, e continua funcionando depois de uma atualização porque não há trecho de código para quebrar.

Seu trabalho, sempre em movimento

A mesma parede roda suas fotos em vez de texto, um fundo de imagens em movimento feito do seu próprio trabalho. É isso que as pessoas querem dizer com fundo animado ou fundo em movimento atrás de uma seção, geralmente feito com um plugin de slideshow, um vídeo em loop ou um bloco de CSS. No construtor de páginas do Instinctor é uma configuração: aponte o Motion Wall para suas imagens e o fundo de imagens em movimento flutua atrás do seu texto, sem arquivo de vídeo e sem plugin.

Profundidade em camadas, sem designer

Um fundo de texto em camadas em que a tipografia se empilha e se desloca em profundidade. Efeitos assim costumam ser uma pilha de modos de mesclagem e z-index em CSS, ou um fundo animado que você cola do CodePen torcendo para sobreviver à próxima edição. Como Motion Wall, é uma única opção da seção, então o fundo de texto animado faz parte da página em vez de ser um script acoplado, e as palavras continuam sendo texto real e rastreável.

Uma palavra sem tom

Movimento que para a rolagem

Lanes é um letreiro rolante na diagonal: as linhas se inclinam e passam correndo em direções alternadas. É o tipo de fundo de texto em movimento que as pessoas procuram como "marquee text css" ou efeito de texto com rolagem infinita, e depois refazem toda vez que um tema é atualizado. No Instinctor é um movimento do Motion Wall, disponível em qualquer seção, então o fundo de texto animado continua rápido e legível, sem JavaScript e sem plugin de texto rolante para manter.

Seu portfólio, passando a toda velocidade

No modo de imagem, Lanes faz suas fotos passarem correndo na diagonal, um fundo de imagens em movimento em vez de um fundo de texto em movimento. Fazer isso com um letreiro de imagens normalmente exige um plugin de carrossel ou uma animação em CSS feita à mão. No Motion Wall é um movimento apontado para a sua biblioteca de imagens, então o fundo animado é uma configuração da seção, continua leve e mostra o seu trabalho real em vez de fotos genéricas de banco de imagens.

Parece feito por um estúdio

Zoom faz um mergulho infinito: a parede aumenta e faz uma transição cruzada para si mesma em um fundo de texto em movimento que parece estar caindo para frente. Construir isso à mão significa transformações CSS empilhadas ou um fundo animado de uma demonstração do codepen. Aqui é uma única configuração da Motion Wall na seção, para que o fundo de texto animado seja renderizado ao vivo no navegador, permaneça leve na velocidade da página e não precise de código para manter.

Mergulhe em seu próprio trabalho

Zoom no modo de imagem mergulha infinitamente através de suas fotos, um fundo de imagem animado que parece estar caindo no trabalho. As pessoas constroem um fundo em movimento como este com um vídeo em loop ou transformações CSS empilhadas. Aqui é uma única configuração da Motion Wall: escolha imagens, escolha zoom, e o fundo de imagem em movimento é executado ao vivo atrás da seção sem vídeo para hospedar e sem plugin para manter.

Texto 3D sem After Effects

Tilt inclina toda a parede em um plano 3D raso, um fundo de texto em movimento com sensação de profundidade. Normalmente é uma transformação CSS 3D que você ajusta à mão, ou um widget de fundo animado pago. Na Motion Wall é uma opção em qualquer seção, para que o fundo de texto animado faça parte do construtor de páginas em vez de um trecho, e o tipo atrás do seu conteúdo permaneça como texto selecionável e indexável.

Suas fotos, inclinadas em 3D

Uma galeria inclinada: suas fotos se inclinam para um plano 3D raso e flutuam, um fundo de imagem em movimento com profundidade. Normalmente isso seria uma transformação 3D CSS e um script de apresentação de slides, ou um widget de fundo animado pago. Na Motion Wall é uma opção na seção, então o fundo de imagem animado faz parte do construtor de páginas, renderiza em tempo real e mostra seu trabalho atrás do texto.

Um ticker ao vivo, integrado

O tambor faz o tipo girar em torno de um eixo horizontal, um fundo de texto em movimento que gira como um ticker. As pessoas recorrem a um gerador de marquê, uma faixa de texto rolante ou uma animação 3D CSS para isso. No Instinctor, a Motion Wall faz isso como uma configuração na seção: digite as palavras, escolha o tambor, defina a velocidade e o fundo de texto animado é executado em tempo real sem nada para exportar e sem plugin para atualizar.

Seu trabalho em um carretel giratório

O tambor faz suas fotos girarem em torno de um eixo horizontal, um fundo de imagem em movimento que gira como um carretel. Recriá-lo significa uma animação 3D CSS e uma apresentação de slides, ou uma exportação de vídeo. Na Motion Wall é uma configuração na seção: escolha imagens, escolha o tambor, defina a velocidade e o fundo de imagem em movimento é executado em tempo real sem arquivo de vídeo e sem plugin para manter atualizado.

Movimento bicolor em um clique

Cross executa dois marquês um sobre o outro em duas cores, um fundo de texto em movimento mais ocupado para uma seção mais impactante. Construído manualmente, são duas animações CSS em camadas e combinadas por cor manualmente, ou uma faixa de texto rolante que você compra e incorpora. Como Motion Wall é um movimento com uma segunda cor, definido na seção, então o fundo de texto animado permanece como uma camada leve e rastreável em vez de uma pilha de widgets.

Stickers espalha etiquetas giradas que flutuam pelo quadro, um fundo de texto em movimento divertido. É o tipo de coisa que as pessoas montam com CSS de posicionamento absoluto ou com um banner do Canva exportado como imagem. No Motion Wall é uma única opção da seção e continua sendo texto ao vivo, então o fundo de texto animado são palavras reais e indexáveis, não um gráfico achatado que os mecanismos de busca não conseguem ler.

Seu trabalho, espalhado e vivo

Stickers espalha suas fotos como adesivos girados que flutuam, um fundo de imagens em movimento divertido. Normalmente isso é uma colagem em CSS com posicionamento absoluto ou uma exportação do Canva salva como uma única imagem achatada. No Motion Wall ele continua sendo uma camada ao vivo de imagens separadas, então o fundo animado se atualiza quando você troca uma foto, sem gráfico achatado e sem plugin, configurado no painel da seção.

Seu trabalho emoldurando a página

Uma parede ousada, sem código

Bricks compacta as letras em uma alvenaria densa de blocos, alternando blocos invertidos, e desliza o campo inteiro. É o fundo de texto em movimento mais ousado do conjunto, o tipo de fundo animado que as pessoas caçam no CodePen. No construtor de páginas do Instinctor é um movimento com uma segunda cor que contrasta de propósito, definido na seção, então o fundo de texto animado já vem com a página e nunca precisa de atualização de plugin.

Movimento hipnotizante em um clique

Vortex gira o campo em redemoinho para dentro, um fundo de texto em movimento que puxa o olhar para um ponto central. Recriar isso exige CSS ou JavaScript personalizado e muito ajuste fino, ou um trecho de código de fundo animado que você herda e não consegue mudar com facilidade. Como Motion Wall, é uma opção em qualquer seção, então o fundo de texto animado é uma configuração que você ajusta em um painel, e as palavras continuam sendo texto ao vivo e legível.

Seu trabalho, atraindo o olhar

Vortex faz suas fotos girarem em redemoinho para dentro, um fundo de imagens em movimento que puxa o olhar para um ponto central. Recriar isso exige WebGL ou muito JavaScript personalizado. Como Motion Wall, é uma opção da seção, então o fundo de imagens animado é uma configuração que você ajusta em um painel, roda ao vivo no navegador e mostra o seu trabalho real em vez de um loop de banco de imagens.

A textura, sem a renderização

Static deixa a parede parada: a tipografia repetida, sem o movimento, para quando você quer a textura de um fundo de texto animado numa seção calma. É um padrão que de outro jeito você montaria com um fundo repetido em CSS ou uma imagem em mosaico. Aqui é o mesmo Motion Wall com o movimento definido como nenhum, então o fundo continua sendo palavras reais na página e você pode religar o movimento com um único controle.

Seu trabalho, fixado atrás de tudo

Static no modo de imagem fixa suas fotos em uma grade imóvel, um fundo de foto com a textura de um fundo de imagem em movimento, mas uma seção calma. É o que você construiria com uma CSS grid de imagens de fundo. Aqui é o mesmo Motion Wall com movimento desligado, para que você mantenha suas próprias imagens atrás do texto e possa ativar o movimento novamente com um controle.

Perspectiva, sem software 3D

Funnel converge as linhas para um ponto de fuga, um fundo de texto em movimento com perspectiva. Normalmente é um conjunto de transformações CSS ou um esboço WebGL do codepen. No Motion Wall é uma única opção na seção, então o fundo de texto animado faz parte do construtor de páginas, renderiza ao vivo e mantém o tipo atrás do seu texto como texto rastreável e indexável, em vez de um gráfico incorporado.

Um banner que nunca para

Banner corta uma faixa angular de tipo em movimento pela seção, o primo diagonal de um banner de texto rolante. As pessoas compram um gerador de scrolling-text-banner ou um widget Elementor para isso. No Instinctor, o Motion Wall faz isso como uma configuração em qualquer seção, então o fundo de texto animado é integrado, permanece rápido e nunca depende de um plugin de banner de terceiros que pode quebrar na próxima atualização.

Um visual de impressão, ao vivo na página

Overprint sobrepõe duas cores das mesmas letras levemente deslocadas, um fundo de texto em movimento com cara de impressão em risografia. Feito à mão, é CSS em camadas com modos de mesclagem; baixado, é um fundo animado que você não consegue recolorir com facilidade. Como Motion Wall, é um movimento com uma segunda tinta, definido na seção, então você reajusta o fundo de texto animado em um painel e ele continua sendo texto real e indexável.

Profundidade WebGL, sem WebGL

Coils faz as letras subirem girando em colunas de hélice vertical, um fundo de texto em movimento elaborado. É o tipo de fundo animado que costuma existir em um CodePen de WebGL ou em uma exportação do After Effects. No construtor de páginas do Instinctor é uma única opção da seção, renderizada ao vivo no navegador, então o fundo de texto animado pesa pouco na velocidade da página e não precisa de biblioteca, plugin nem código para manter.

Texto em uma curva, sem JavaScript

Snake enrosca o texto ao longo de um caminho sinuoso, um fundo de texto em movimento que funciona como um letreiro seguindo uma curva. Fazer isso manualmente significa caminhos SVG e JavaScript, ou um efeito de texto rolante do codepen. Na Motion Wall é um movimento na seção, então o fundo de texto animado é uma configuração em vez de um script, e as palavras permanecem como texto selecionável e indexável na página ao vivo.

Tipo circular, sem trabalho com SVG

Rings dispõe as letras em círculos concêntricos que giram em sentidos opostos, uma versão circular do fundo de texto em movimento. Recriar isso exige textPath de SVG e animação personalizada, ou um fundo animado que você copia e não consegue editar. Como Motion Wall, é uma única opção em qualquer seção, então este fundo de texto animado faz parte do construtor de páginas, roda ao vivo e mantém as letras como palavras reais e rastreáveis.

Movimento suave, nada para codificar

Wave lanes flui as linhas ao longo de caminhos de seno suaves, um fundo de texto em movimento mais suave que um letreiro reto. Construído manualmente é CSS com keyframes ou um esboço canvas. Na Motion Wall é um movimento na seção, então o fundo de texto animado é um controle que você define em um painel, permanece rápido na página e não precisa de plugin de texto rolante ou animação escrita manualmente para mantê-lo funcionando.

Uma onda que você nunca codificou

O Wave stack faz uma onda percorrer linhas de texto em largura total, um fundo de texto animado que ondula. É o tipo de fundo animado que as pessoas procuram como texto em onda com CSS ou um efeito do CodePen. No Instinctor, é uma única opção do Motion Wall na seção, então o fundo de texto animado é renderizado ao vivo, continua leve e o texto por trás do seu conteúdo permanece como palavras reais e indexáveis, e não uma imagem achatada.

Letras que respiram sozinhas

O Weight walk anima a espessura do traço ao longo das letras, do fino ao grosso e de volta, um fundo de texto animado sutil feito com uma fonte variável. Programado à mão, são font-variation-settings e keyframes; comprado pronto, é um widget que você não consegue reajustar. Como Motion Wall, é um único movimento na seção, então o fundo de texto animado vira uma configuração em um painel e mantém o texto vivo e rastreável.

Um pano de fundo que o cursor revela

O efeito holofote esconde a parede quase por completo e só deixa o fundo de texto animado brilhar onde o cursor passa. Feito à mão, é uma máscara controlada por JavaScript e eventos do mouse. No Motion Wall, é uma única opção na seção, então o fundo de texto animado é um efeito interativo que você ativa em um painel, sem código e sem plugin, e o texto por baixo continua legível.

Todos os controles no painel

Você define o texto, o tamanho, o peso e a velocidade. Uma cor soa como um sussurro; acrescente uma segunda e os modos de duas tintas as colocam em choque de propósito. O parallax desloca a parede em relação ao cursor para dar profundidade, e tudo isso pode sumir no celular, onde só tomaria espaço.

Energia, não decoração

Uma seção estática pede que o leitor forneça o interesse. Uma parede em movimento fornece isso por ele: o olho pega a deriva, a seção parece pensada, e o texto em primeiro plano pega carona nessa energia sem gritar. Usada uma vez, sobre um título que aguente, é a forma mais barata de fazer uma página parecer produzida em vez de apenas postada.

O que é um fundo de texto animado?

Um fundo de texto animado é exatamente o que o nome diz: um fundo feito de tipografia em movimento. Em vez de uma cor lisa ou de uma foto parada, uma palavra ou frase curta é repetida por toda a seção e posta em movimento atrás do seu conteúdo, escurecida o suficiente para continuar sendo cenário. Isso dá energia a uma faixa comum antes de o visitante ler uma única palavra.

Normalmente os designers montam isso na mão com CSS ou com um vídeo exportado. O Instinctor transforma isso em uma configuração: ligue o Motion Wall em qualquer seção, escolha o texto ou as suas próprias imagens, escolha um movimento e as cores, e ele roda ao vivo na página. O fundo em movimento é HTML de verdade e leve, então a página continua rápida e o texto na frente dele continua legível e amigável para busca.

FAQ sobre fundo de texto animado

Veja o que mais ele faz

O Motion Wall é uma das quarenta formas de movimento do Impulse. Todo bloco é feito do mesmo jeito.

Seu trabalho, passando

A parede Scroll no modo de imagem faz suas fotos passarem como um letreiro rolante, um fundo de imagens em movimento feito de trabalho real. É o fundo animado que as pessoas montam com um letreiro de imagens, um plugin de slideshow ou um vídeo em loop. No Motion Wall é uma configuração da seção: aponte para suas imagens, escolha scroll, e o fundo de imagens em movimento roda ao vivo atrás do seu conteúdo, sem nada para hospedar e sem plugin para instalar.