Obs.: embora os nossos guias mais acessados tenham sido traduzidos para o português, outros guias estão disponíveis apenas em inglês.

Animações e efeitos de imagem

Você pode adicionar animações a uma pequena área do seu site, como o fundo de uma seção ou um Bloco de Imagens; ou pode ativar uma animação geral que aparece enquanto os visitantes percorrem o site.

Este guia analisa como ativar diferentes efeitos de animação em diferentes áreas do seu site.

Dica: para adicionar efeitos de pairar ao seu site, como títulos de imagens e legendas, acesse Criar efeitos de pairar para suas imagens.

Antes de começar

  • As animações em Blocos de Imagem individuais, Blocos de Citação e outras áreas substituem animações em todo o site.
  • Algumas páginas de coleção, como Páginas do Blog e Páginas de Portfólio, sempre têm animações sutis quando a página é carregada, mesmo quando as animações em todo o site estão desativadas. 
  • Ao desativar as animações de bloco e página, essas áreas seguirão os estilos gerais do site.

Animações em todo o site

As animações em todo o site estão disponíveis somente na versão 7.1.

Animações em todo o site se aplicam à maioria das áreas do seu site, com efeitos mais visíveis em algumas áreas do que outras. Essas animações afetam principalmente a maneira como imagens, texto e outros blocos aparecem à medida que você percorre uma página. Algumas animações também aparecem quando um visitante passa o cursor do mouse sobre links e botões. 

Recomendamos ativar um estilo de animação e ver como ele fica em diferentes páginas do seu site. Experimente cada estilo até encontrar o que funciona melhor para o seu conteúdo.

Para animar o conteúdo do site:

  1. Ao editar uma página, abra Estilos do Site e clique em Animações.
  2. Clique em um estilo de animação.
  3. Escolha uma velocidade de animação Lenta, Média ou Rápida.
  4. Passe o cursor sobre Concluído e clique em Salvar.

Estilos de animação

Escolha entre estes estilos de animação:

  • Nenhum- Desativa animações em todo o site.
  • Fade - O conteúdo desaparece à medida que é exibido na página.
  • Escala- O conteúdo é animado de um tamanho menor até o tamanho final, criando um efeito de zoom.
  • Slide - O conteúdo desliza para cima no lugar, acentuando o efeito de rolar para baixo da página.
  • Clip - o conteúdo desliza linha por linha a partir da esquerda.
  • Flex - adiciona uma animação exclusiva a títulos, texto vinculado, botões e Páginas de Portfólio.

Remover animações em todo o site

Para desativar as animações em todo o site:

  1. Ao editar uma página, clique no ícone do pincel e depois em Animações.
  2. Escolha Nenhum.
  3. Passe o cursor sobre Concluído e clique em Salvar.

Assista a este vídeo

Animações de segundo plano

Você pode animar o segundo plano do seu site com efeitos de imagem ou um vídeo em loop, dependendo da versão do seu site.

Efeitos de imagem

Os efeitos de imagem de segundo plano só estão disponíveis na versão 7.1.

Se a seção da página usa uma imagem de fundo, você pode adicionar efeitos de imagem para dar ao plano de fundo uma aparência mais estilizada. Alguns efeitos adicionam uma animação para que a imagem esteja sempre em movimento, enquanto outros aparecem apenas quando o visitante percorre essa seção do seu site.

Para adicionar um efeito de imagem:

  1. Depois de adicionar um plano de fundo de seção, no editor de seção, clique em Plano de fundo.
  2. Role para baixo até Efeito de imagem e escolha um efeito no menu suspenso. O efeito aparecerá na pré-visualização do seu site.
  3. Passe o cursor sobre Concluído e clique em Salvar.

Lembre-se:

  • Os efeitos da imagem só aparecem em navegadores e aparelhos compatíveis com WebGL, uma ferramenta que funciona com o processador gráfico do seu aparelho. Para ver se seu navegador é compatível, acesse get.webgl.org. Caso não seja, o fundo da seção permanecerá estático.
  • Os efeitos de imagem não aparecem em vídeos de segundo plano.

Vídeos de fundo

Dependendo da versão do site, você pode adicionar um vídeo ao plano de fundo de uma seção de página, banners e outras áreas.

  • Os vídeos de segundo plano são reproduzidos em um loop sem som.
  • Para adicionar um vídeo ao plano de fundo, é necessário um URL do YouTube ou do Vimeo. Não é possível fazer upload de um vídeo diretamente para o Squarespace.

Saiba mais em Adição de vídeo no plano de fundo.

Animações de bloco

Você pode adicionar animações a Blocos de Imagem e Blocos de Cotação que os visitantes veem quando carregam ou atualizam a página.

Blocos de Imagem

Para animar um Bloco de Imagem:

  1. No editor Bloco de Imagens, clique em Designe, em seguida, clique em Animações.
  2. Selecione um efeito na lista para aplicar à imagem e a qualquer texto. Ao selecionar uma opção, você verá uma pré-visualização dela na página.
  3. Para animar a imagem e o texto separadamente, selecione Personalizadoe, em seguida, selecione as opções para Imageme Texto.

Escolha entre estas opções de animação para a imagem, o texto ou ambos:

  • Fade In - o bloco, a imagem ou texto aparece gradualmente
  • Deslizar para cima - o bloco, a imagem ou texto desliza para cima
  • Deslizar para baixo - a imagem ou texto desliza para baixo
  • Clipe horizontal - o bloco ou a imagem carrega em camadas horizontais
  • Clipe vertical - o bloco ou a imagem carrega em camadas verticais
  • Inclinar para cima - o bloco ou a imagem aumenta com inclinação para cima
  • Inclinar para baixo - o bloco ou a imagem aumenta com inclinação para baixo
  • Foco - o bloco aparece borrado e depois entra em foco
  • Colidir - imagem e texto deslizam de fora para dentro pelos lados
  • Revelar - imagem e texto deslizam do centro para fora
  • Deslizar da esquerda - a imagem ou texto aparece deslizando pela esquerda
  • Deslizar da direita - a imagem ou texto aparece deslizando pela direita

Blocos de Citações

Para animar um Bloco de Citações:

  1. Clique na guia Design no editor de blocos.
  2. Selecione um efeito no menu suspenso. À medida que explora as opções, você verá visualizações de como elas são carregadas.

Escolha entre:

  • Fade In - o texto aparece gradualmente
  • Deslizar para cima - o texto desliza de baixo para cima
  • Foco - o texto aparece borrado e, em seguida, entra em foco
  • Revelar - o texto desliza do centro para fora

Resolução de problemas

Se as animações não aparecerem no site, lembre-se:

  • Animações em todo o site e segundos planos de seção só estão disponíveis na versão 7.1.
  • Alguns conteúdos só suportam o estilo de animação em todo o site Fade. Se você escolher um estilo diferente, o conteúdo que não for compatível com ele desaparecerá.
  • Se nenhum dos seus conteúdos estiver animando, verifique se está usando um navegador compatível.
Este artigo foi útil?
Utilizadores que acharam útil: 27 de 58
Animações e efeitos de imagem