Os efeitos de texto não são compatíveis com anúncios gráficos ou anúncios HTML para AMP.
Você pode adicionar efeitos animados a elementos de texto no Google Web Designer, como um efeito no estilo de máquina de escrever que faz com que uma letra apareça por vez. Os efeitos de texto são definidos no painel Efeitos de texto. Se ele não for exibido, abra-o no menu Janela.
Adicionar um efeito de texto
É possível adicionar um efeito de texto a um elemento de texto seguindo estas etapas:
- Selecione o ponto na linha do tempo em que você quer que a animação de efeito de texto comece.
- Selecione o elemento de texto a que você quer aplicar o efeito. Só é possível aplicar efeitos de texto a um único elemento por vez.
- No painel Efeitos de texto, selecione o efeito que você quer no menu suspenso Efeito:
- Clique no botão Adicionar
.
- Ajuste as propriedades do efeito de texto no painel. Uma explicação das propriedades de cada efeito pode ser encontrada abaixo.
.Uma camada para cada efeito de texto é adicionada à linha do tempo do Modo avançado abaixo da camada do elemento de texto.
Ao contrário das camadas de elementos, as camadas de efeito de texto não são compatíveis com repetições ou alças de visibilidade. Elas são sempre anexadas à camada de elemento de texto associada, de modo que também não podem ser reordenadas, bloqueadas ou ocultas de forma independente, e compartilham o intervalo de visibilidade da camada de texto.
Você pode adicionar vários efeitos de texto sucessivamente ao mesmo elemento de texto, mas eles não podem ser aplicados ao mesmo tempo, ou seja, os efeitos não podem se sobrepor na linha do tempo.
Visualizar um efeito de texto
No painel "Efeitos de texto"
Verifique como um efeito de texto aparece no painel de visualização na parte superior do painel "Efeitos de texto". As palavras "Efeitos de texto" serão animadas usando o conjunto atual de propriedades de efeito de texto. Se um efeito de texto ainda não tiver sido adicionado, as propriedades padrão do efeito selecionado serão usadas. Use os seguintes controles de visualização:
-
Reproduzir
: reproduz a visualização do efeito de texto.
-
Repetir
: repete a visualização continuamente durante a reprodução.
-
Pausar
: pausa a visualização enquanto ela é reproduzida.
No cenário
Os efeitos de texto são exibidos no cenário, refletindo a hora atual na linha do tempo da animação. Pressione o botão Reproduzir na linha do tempo para visualizar a animação do efeito de texto com outros elementos no cenário.
Se você usar a ferramenta Texto para editar o conteúdo de um elemento de texto que tenha um efeito de texto aplicado, o efeito será temporariamente desativado para que você possa ver o texto completo.
Gerenciar efeitos de texto
Embora seja possível adicionar efeitos de texto usando a linha do tempo do Modo rápido, é necessário alternar para a linha do tempo do Modo avançado para gerenciar os efeitos existentes.
Ajustar a duração de um efeito de texto
Por padrão, um efeito de texto é adicionado à posição atual do marcador na linha do tempo com uma duração de dois segundos. Você pode mudar a hora de início ou a duração do efeito de texto:
-
Para mudar a duração no painel Efeitos de texto, insira um novo valor em segundos no campo Duração ou arraste o controle deslizante.
-
Para mudar a duração na linha do tempo, passe o cursor sobre a borda esquerda ou direita de um período de efeito de texto até que uma barra seja exibida e arraste-a ao longo da linha do tempo. Arrastar a borda esquerda também muda o horário de início do efeito.
-
Para mudar o horário de início sem mudar a duração, arraste todo o período do efeito de texto para o ponto da linha do tempo que você quiser.
Editar as propriedades de um efeito de texto
Cada efeito pode ser personalizado:
- Selecione o efeito de texto na linha do tempo.
- Ajuste as propriedades no painel "Efeitos de texto".
Você pode editar a duração e o easing de qualquer animação de efeito de texto. A maioria dos efeitos também pode ser configurada para animar por letra, palavra ou linha, ou até mesmo em clusters de letras, palavras ou linhas.
Consulte a lista de efeitos para ver as propriedades disponíveis para cada um deles.
Alternar para um efeito de texto diferente
Você pode mudar o tipo de efeito que quer aplicar ao texto.
- Selecione o efeito de texto na linha do tempo.
- No painel "Efeitos de texto", selecione um efeito diferente no menu suspenso Efeito.
Remover um efeito de texto
Você pode usar um dos métodos a seguir para remover um efeito de texto:
- Clique com o botão direito do mouse no efeito de texto na linha do tempo e selecione Excluir no menu pop-up.
- Selecione o efeito de texto na linha do tempo e pressione a tecla Delete.
Efeitos
É possível personalizar cada efeito ajustando as propriedades dele.
O texto fica em foco depois de ser desfocado.
Propriedades do desfoque
| Duração | Quanto tempo, em segundos, leva para que todo o efeito de animação seja concluído. |
|---|---|
| Easing | Como a animação acelera e desacelera. Saiba mais sobre easing. |
| Desfoque | É o raio de desfoque máximo, em pixels. |
| Opacidade | É a opacidade inicial do texto, em porcentagem. Quando a caixa Inversão estiver marcada, este campo definirá a opacidade final. |
| Velocidade | Com que rapidez cada letra, palavra ou linha começa a ser animada após a anterior. Por exemplo, um valor de 0,25 para um efeito de letra por letra significa que, quando uma letra conclui 1⁄4 da animação, a próxima letra começa a ser animada. |
| Sequência |
Selecione como o efeito avança pelo texto:
Se selecionar algo além de "Todos de uma vez", você também poderá animar conjuntos de letras, palavras ou linhas juntos. Especifique o tamanho do agrupamento ou o número total de grupos:
|
| Ordem aleatória | Por padrão, cada grupo de letras, palavras ou linhas é animado da esquerda para a direita e de cima para baixo. Selecione esta opção se você quiser embaralhar a ordem da animação. Depois de aleatória, a ordem permanece inalterada até que as propriedades do texto ou do efeito de texto sejam modificadas de uma maneira que afete a sequência. Desmarcar e marcar essa opção novamente reorganiza a ordem. |
| Inversão | Reproduz o efeito de animação ao contrário, terminando com o texto desfocado. |
O texto cai no lugar por cima (ao longo do eixo z).
Propriedades da descida
| Duração | Quanto tempo, em segundos, leva para que todo o efeito de animação seja concluído. |
|---|---|
| Easing | Como a animação acelera e desacelera. Saiba mais sobre easing. |
| Distância | A distância em pixels do movimento do texto ao longo do eixo z. |
| Opacidade | É a opacidade inicial do texto, em porcentagem. Quando a caixa Inversão estiver marcada, este campo definirá a opacidade final. |
| Velocidade | Com que rapidez cada letra, palavra ou linha começa a ser animada após a anterior. Por exemplo, um valor de 0,25 para um efeito de letra por letra significa que, quando uma letra conclui 1⁄4 da animação, a próxima letra começa a ser animada. |
| Sequência |
Selecione como o efeito avança pelo texto:
Se selecionar algo além de "Todos de uma vez", você também poderá animar conjuntos de letras, palavras ou linhas juntos. Especifique o tamanho do agrupamento ou o número total de grupos:
|
| Ordem aleatória | Por padrão, cada grupo de letras, palavras ou linhas é animado da esquerda para a direita e de cima para baixo. Selecione esta opção se você quiser embaralhar a ordem da animação. Depois de aleatória, a ordem permanece inalterada até que as propriedades do texto ou do efeito de texto sejam modificadas de uma maneira que afete a sequência. Desmarcar e marcar essa opção novamente reorganiza a ordem. |
| Inversão | Reproduz o efeito de animação ao contrário, com o texto se levantando da superfície. |
O texto é revelado com uma máscara de gradiente linear.
Propriedades do gradiente
| Duração | Quanto tempo, em segundos, leva para que todo o efeito de animação seja concluído. |
|---|---|
| Easing | Como a animação acelera e desacelera. Saiba mais sobre easing. |
| Ângulo | É o ângulo do gradiente em graus. |
| Opacidade | É a opacidade da máscara de gradiente. |
| Velocidade | Com que rapidez cada letra, palavra ou linha começa a ser animada após a anterior. Por exemplo, um valor de 0,25 para um efeito de letra por letra significa que, quando uma letra conclui 1⁄4 da animação, a próxima letra começa a ser animada. |
| Sequência |
Selecione como o efeito avança pelo texto:
Se selecionar algo além de "Todos de uma vez", você também poderá animar conjuntos de letras, palavras ou linhas juntos. Especifique o tamanho do agrupamento ou o número total de grupos:
|
| Ordem aleatória | Por padrão, cada grupo de letras, palavras ou linhas é animado da esquerda para a direita e de cima para baixo. Selecione esta opção se você quiser embaralhar a ordem da animação. Depois de aleatória, a ordem permanece inalterada até que as propriedades do texto ou do efeito de texto sejam modificadas de uma maneira que afete a sequência. Desmarcar e marcar essa opção novamente reorganiza a ordem. |
| Inversão | Reproduz o efeito de animação ao contrário, ocultando o texto com uma máscara de gradiente. |
O texto é girado verticalmente (ao longo do eixo x) até que fique plano.
Propriedades da virada
| Duração | Quanto tempo, em segundos, leva para que todo o efeito de animação seja concluído. |
|---|---|
| Easing | Como a animação acelera e desacelera. Saiba mais sobre easing. |
| Direção |
Selecione onde posicionar o eixo de rotação:
|
| Rotação | É a distância de rotação do texto em graus. |
| Opacidade | É a opacidade inicial do texto, em porcentagem. Quando a caixa Inversão estiver marcada, este campo definirá a opacidade final. |
| Velocidade | Com que rapidez cada letra, palavra ou linha começa a ser animada após a anterior. Por exemplo, um valor de 0,25 para um efeito de letra por letra significa que, quando uma letra conclui 1⁄4 da animação, a próxima letra começa a ser animada. |
| Sequência |
Selecione como o efeito avança pelo texto:
Se selecionar algo além de "Todos de uma vez", você também poderá animar conjuntos de letras, palavras ou linhas juntos. Especifique o tamanho do agrupamento ou o número total de grupos:
|
| Ordem aleatória | Por padrão, cada grupo de letras, palavras ou linhas é animado da esquerda para a direita e de cima para baixo. Selecione esta opção se você quiser embaralhar a ordem da animação. Depois de aleatória, a ordem permanece inalterada até que as propriedades do texto ou do efeito de texto sejam modificadas de uma maneira que afete a sequência. Desmarcar e marcar essa opção novamente reorganiza a ordem. |
| Inversão | Reproduz o efeito de animação ao contrário, terminando com o texto girado. |
O texto se move verticalmente até a posição.
Propriedades de alinhamento
| Duração | Quanto tempo, em segundos, leva para que todo o efeito de animação seja concluído. |
|---|---|
| Easing | Como a animação acelera e desacelera. Saiba mais sobre easing. |
| Direção |
Selecione a origem do movimento do texto:
|
| Distância | A distância em pixels do movimento do texto ao longo do eixo y. |
| Opacidade | É a opacidade inicial do texto, em porcentagem. Quando a caixa Inversão estiver marcada, este campo definirá a opacidade final. |
| Velocidade | Com que rapidez cada letra, palavra ou linha começa a ser animada após a anterior. Por exemplo, um valor de 0,25 para um efeito de letra por letra significa que, quando uma letra conclui 1⁄4 da animação, a próxima letra começa a ser animada. |
| Sequência |
Selecione como o efeito avança pelo texto:
Se selecionar algo além de "Todos de uma vez", você também poderá animar conjuntos de letras, palavras ou linhas juntos. Especifique o tamanho do agrupamento ou o número total de grupos:
|
| Ordem aleatória | Por padrão, cada grupo de letras, palavras ou linhas é animado da esquerda para a direita e de cima para baixo. Selecione esta opção se você quiser embaralhar a ordem da animação. Depois de aleatória, a ordem permanece inalterada até que as propriedades do texto ou do efeito de texto sejam modificadas de uma maneira que afete a sequência. Desmarcar e marcar essa opção novamente reorganiza a ordem. |
| Inversão | Reproduz o efeito de animação ao contrário, com o texto se deslocando para fora da posição. |
O texto é girado ao longo do eixo z até ficar reto.
Propriedades do giro no eixo Z
| Duração | Quanto tempo, em segundos, leva para que todo o efeito de animação seja concluído. |
|---|---|
| Easing | Como a animação acelera e desacelera. Saiba mais sobre easing. |
| Direção |
Selecione onde posicionar o eixo de rotação:
|
| Rotação | É a distância de rotação do texto em graus. |
| Opacidade | É a opacidade inicial do texto, em porcentagem. Quando a caixa Inversão estiver marcada, este campo definirá a opacidade final. |
| Velocidade | Com que rapidez cada letra, palavra ou linha começa a ser animada após a anterior. Por exemplo, um valor de 0,25 para um efeito de letra por letra significa que, quando uma letra conclui 1⁄4 da animação, a próxima letra começa a ser animada. |
| Sequência |
Selecione como o efeito avança pelo texto:
Se selecionar algo além de "Todos de uma vez", você também poderá animar conjuntos de letras, palavras ou linhas juntos. Especifique o tamanho do agrupamento ou o número total de grupos:
|
| Ordem aleatória | Por padrão, cada grupo de letras, palavras ou linhas é animado da esquerda para a direita e de cima para baixo. Selecione esta opção se você quiser embaralhar a ordem da animação. Depois de aleatória, a ordem permanece inalterada até que as propriedades do texto ou do efeito de texto sejam modificadas de uma maneira que afete a sequência. Desmarcar e marcar essa opção novamente reorganiza a ordem. |
| Inversão | Reproduz o efeito de animação ao contrário, terminando com o texto girado. |
O texto rola verticalmente para a área de visualização e depois para fora dela.
Propriedades da rolagem
| Duração | Quanto tempo, em segundos, leva para que todo o efeito de animação seja concluído. |
|---|---|
| Easing | Como a animação acelera e desacelera. Saiba mais sobre easing. |
| Tipo |
Selecionar:
|
O texto desliza para o local como se estivesse fora do contêiner de texto.
Propriedades do deslizamento
| Duração | Quanto tempo, em segundos, leva para que todo o efeito de animação seja concluído. |
|---|---|
| Easing | Como a animação acelera e desacelera. Saiba mais sobre easing. |
| Direção |
Selecione a origem do movimento do texto:
|
| Opacidade | É a opacidade inicial do texto, em porcentagem. Quando a caixa Inversão estiver marcada, este campo definirá a opacidade final. |
| Velocidade | Com que rapidez cada letra, palavra ou linha começa a ser animada após a anterior. Por exemplo, um valor de 0,25 para um efeito de letra por letra significa que, quando uma letra conclui 1⁄4 da animação, a próxima letra começa a ser animada. |
| Sequência |
Selecione como o efeito avança pelo texto:
Se selecionar algo além de "Todos de uma vez", você também poderá animar conjuntos de letras, palavras ou linhas juntos. Especifique o tamanho do agrupamento ou o número total de grupos:
|
| Ordem aleatória | Por padrão, cada grupo de letras, palavras ou linhas é animado da esquerda para a direita e de cima para baixo. Selecione esta opção se você quiser embaralhar a ordem da animação. Depois de aleatória, a ordem permanece inalterada até que as propriedades do texto ou do efeito de texto sejam modificadas de uma maneira que afete a sequência. Desmarcar e marcar essa opção novamente reorganiza a ordem. |
| Inversão | Reproduz o efeito de animação ao contrário, com o texto deslizando para fora do contêiner. |
O texto gira ao longo do eixo y até que fique plano.
Propriedades do giro no eixo Y
| Duração | Quanto tempo, em segundos, leva para que todo o efeito de animação seja concluído. |
|---|---|
| Easing | Como a animação acelera e desacelera. Saiba mais sobre easing. |
| Direção |
Selecione onde posicionar o eixo de rotação:
|
| Rotação | É a distância de rotação do texto em graus. |
| Opacidade | É a opacidade inicial do texto, em porcentagem. Quando a caixa Inversão estiver marcada, este campo definirá a opacidade final. |
| Velocidade | Com que rapidez cada letra, palavra ou linha começa a ser animada após a anterior. Por exemplo, um valor de 0,25 para um efeito de letra por letra significa que, quando uma letra conclui 1⁄4 da animação, a próxima letra começa a ser animada. |
| Sequência |
Selecione como o efeito avança pelo texto:
Se selecionar algo além de "Todos de uma vez", você também poderá animar conjuntos de letras, palavras ou linhas juntos. Especifique o tamanho do agrupamento ou o número total de grupos:
|
| Ordem aleatória | Por padrão, cada grupo de letras, palavras ou linhas é animado da esquerda para a direita e de cima para baixo. Selecione esta opção se você quiser embaralhar a ordem da animação. Depois de aleatória, a ordem permanece inalterada até que as propriedades do texto ou do efeito de texto sejam modificadas de uma maneira que afete a sequência. Desmarcar e marcar essa opção novamente reorganiza a ordem. |
| Inversão | Reproduz o efeito de animação ao contrário, terminando com o texto girado. |
O texto se move horizontalmente até a posição.
Propriedades da extensão
| Duração | Quanto tempo, em segundos, leva para que todo o efeito de animação seja concluído. |
|---|---|
| Easing | Como a animação acelera e desacelera. Saiba mais sobre easing. |
| Direção |
Selecione a origem do movimento do texto:
|
| Distância | A distância em pixels do movimento do texto ao longo do eixo x. |
| Opacidade | É a opacidade inicial do texto, em porcentagem. Quando a caixa Inversão estiver marcada, este campo definirá a opacidade final. |
| Velocidade | Com que rapidez cada letra, palavra ou linha começa a ser animada após a anterior. Por exemplo, um valor de 0,25 para um efeito de letra por letra significa que, quando uma letra conclui 1⁄4 da animação, a próxima letra começa a ser animada. |
| Sequência |
Selecione como o efeito avança pelo texto:
Se selecionar algo além de "Todos de uma vez", você também poderá animar conjuntos de letras, palavras ou linhas juntos. Especifique o tamanho do agrupamento ou o número total de grupos:
|
| Ordem aleatória | Por padrão, cada grupo de letras, palavras ou linhas é animado da esquerda para a direita e de cima para baixo. Selecione esta opção se você quiser embaralhar a ordem da animação. Depois de aleatória, a ordem permanece inalterada até que as propriedades do texto ou do efeito de texto sejam modificadas de uma maneira que afete a sequência. Desmarcar e marcar essa opção novamente reorganiza a ordem. |
| Inversão | Reproduz o efeito de animação ao contrário, com o texto se deslocando para fora do lugar. |
É exibido um pedaço do texto por vez.
Propriedades do desfoque
| Duração | Quanto tempo, em segundos, leva para que todo o efeito de animação seja concluído. |
|---|---|
| Easing | Como a animação acelera e desacelera. Saiba mais sobre easing. |
| Opacidade | É a opacidade inicial do texto, em porcentagem. Quando a caixa Inversão estiver marcada, este campo definirá a opacidade final. |
| Velocidade | Com que rapidez cada letra, palavra ou linha começa a ser animada após a anterior. Por exemplo, um valor de 0,25 para um efeito de letra por letra significa que, quando uma letra conclui 1⁄4 da animação, a próxima letra começa a ser animada. |
| Aparecimento gradual | Marque essa caixa se quiser que o texto apareça gradualmente. |
| Sequência |
Selecione como o efeito avança pelo texto:
Você também pode animar grupos de letras, palavras ou linhas. Especifique o tamanho do agrupamento ou o número total de grupos:
|
| Ordem aleatória | Por padrão, cada grupo de letras, palavras ou linhas é animado da esquerda para a direita e de cima para baixo. Selecione esta opção se você quiser embaralhar a ordem da animação. Depois de aleatória, a ordem permanece inalterada até que as propriedades do texto ou do efeito de texto sejam modificadas de uma maneira que afete a sequência. Desmarcar e marcar essa opção novamente reorganiza a ordem. |
| Inversão | Reproduz o efeito de animação ao contrário, com o texto desaparecendo. |
O texto fica maior.
Propriedades de zoom
| Duração | Quanto tempo, em segundos, leva para que todo o efeito de animação seja concluído. |
|---|---|
| Easing | Como a animação acelera e desacelera. Saiba mais sobre easing. |
| Escala | É a porcentagem máxima de aumento do texto. Para valores acima de 100%, o texto volta ao tamanho normal posteriormente. |
| Opacidade | É a opacidade inicial do texto, em porcentagem. Quando a caixa Inversão estiver marcada, este campo definirá a opacidade final. |
| Velocidade | Com que rapidez cada letra, palavra ou linha começa a ser animada após a anterior. Por exemplo, um valor de 0,25 para um efeito de letra por letra significa que, quando uma letra conclui 1⁄4 da animação, a próxima letra começa a ser animada. |
| Sequência |
Selecione como o efeito avança pelo texto:
Se selecionar algo além de "Todos de uma vez", você também poderá animar conjuntos de letras, palavras ou linhas juntos. Especifique o tamanho do agrupamento ou o número total de grupos:
|
| Ordem aleatória | Por padrão, cada grupo de letras, palavras ou linhas é animado da esquerda para a direita e de cima para baixo. Selecione esta opção se você quiser embaralhar a ordem da animação. Depois de aleatória, a ordem permanece inalterada até que as propriedades do texto ou do efeito de texto sejam modificadas de uma maneira que afete a sequência. Desmarcar e marcar essa opção novamente reorganiza a ordem. |
| Inversão | Reproduz o efeito de animação ao contrário, terminando com o texto diminuindo até que ele desapareça. |
Easing de efeito de texto
O easing afeta o modo como a animação de efeito de texto acelera ou diminui a velocidade à medida que progride. Por padrão, o easing é linear, com uma velocidade constante durante todo o efeito de texto. Você pode mudar o easing para uma das seguintes predefinições na lista suspensa Easing do painel "Efeitos de texto":
Linear |
As animações são executadas em uma velocidade constante. |
Ease-in |
As animações começam com velocidade baixa e aceleram no final. |
Ease-in-fast |
As animações começam com velocidade baixa e depois média no final. |
Ease-in-slow |
A animação começa com velocidade muito baixa e acelera no final. |
Ease-in-out |
As animações começam e terminam com velocidade baixa, mas aceleram no meio. |
Ease-out |
As animações começam com velocidade alta e desaceleram no final. |
Ease-out-fast |
As animações começam com velocidade alta e desaceleram no final. |
Ease-out-slow |
As animações começam com velocidade média e desaceleram no final. |
Para visualizar essas opções no Google Web Designer, selecione Opções de easing… para abrir a caixa de diálogo "Easing".
Easing personalizado
Você pode personalizar o easing de um efeito de texto, em vez de usar uma das opções predefinidas:
- Selecione o efeito de texto na linha do tempo.
- No painel "Efeitos de texto", noEasing selecione, Opções de easing...
- Na caixa de diálogo "Easing", selecione Personalizado.
- Use um dos métodos a seguir para alterar o easing:
- Arraste as alças de controle para ajustar a forma da curva de easing. O ângulo da alça de controle determina a quantidade de curva, e o comprimento da alça controla a força de aceleração ou desaceleração.
- No campo Cubic-bezier, insira a notação funcional
cubic-bezier()(em inglês) da curva de Bézier que você quer. Se um valor inválido for inserido, o campo será sublinhado em vermelho.
- Clique em Aplicar.