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

Rolagem parallax

Os templates da família Brine usam um efeito visual especial nas imagens de cabeçalho chamada de rolagem parallax. A rolagem parallax é uma imagem de fundo movendo-se mais lentamente do que o conteúdo em primeiro plano, criando uma ilusão de profundidade e imersão.

A versão 7.1 não aceita a rolagem parallax.

Veja um exemplo de rolagem parallax no template Burke:

parallax_scroll_download.gif

Antes de começar

Páginas aceitas

A rolagem parallax está disponível em páginas que aceitam banners:

  • Páginas Índice (imagens de fundo atrás das seções da Páginas de Layout)
  • Páginas de Layout
  • Páginas de produtos
  • Páginas de Eventos
  • Páginas de Álbum
  • Páginas do Blog
  • Páginas de Galeria

Ative ou desative a rolagem parallax

Se os banners em seu site não mostrarem o efeito da rolagem parallax, ative-o no Estilo do Site da família Brine:

  1. No Menu Inicial, clique em Design e depois em Estilos do Site.
  2. Role para baixo até a seção Principal: Sobreposição.
  3. Marque Ativar Parallax.
  4. Você também pode marcar Recorte inteligente Parallax para minimizar os recortes.
  5. Clique em Salvar

Para desativar a rolagem parallax em seu site, siga os mesmos steps, mas desmarque Ativar Parallax.

Adicione miniaturas

Para criar o efeito parallax, adicione uma imagem em miniatura à sua página ou seção:

Se você não vir o efeito parallax, verifique se ele está ativado.

Aumente o efeito

Existem várias maneiras de aumentar o efeito da rolagem parallax.

Misture conteúdo

Misture imagens de rolagem parallax com conteúdo e imagens que não fazem rolagem parallax. O conteúdo em movimento mais rápido aparece deslizando sobre as imagens parallax.

Por exemplo: em um Índice, você pode misturar seções de conteúdo de rolagem parallax com seções de Índice da galeria sem parallax; ou com seções de conteúdo sem imagem de fundo.

Adicione conteúdo de sobreposição

Outra maneira de aprimorar a rolagem parallax é adicionar texto, botões ou outro conteúdo à imagem como uma sobreposição. Esse conteúdo faz rolagem na mesma velocidade que o resto da página, e mais rápido do que a imagem. Na família Brine, use blocos para adicionar esse conteúdo:

Adicione um filtro de cores

Você pode adicionar um filtro de cor a todos os banners em seu site usando Cor de Sobreposição na seção Principal: Sobreposição em Estilos do Site.

Recortar

Para entender como o recorte afeta as imagens parallax, pense no seu site como um pedaço de papel com um orifício retangular cortado. A imagem parallax é uma camada separada por baixo, visível somente pelo orifício no papel.

Para que o papel faça uma rolagem mais rápida do que a imagem, a imagem precisa ser mais alta do que o orifício. O espaço extra na parte superior e inferior da imagem é o que será revelado à medida que você move o papel para cima e para baixo.

Por causa disso, recortes e alterações no ponto focal podem não ter um impacto notável na posição de uma imagem de rolagem parallax. Seu site foi projetado para garantir que a imagem tenha margens nos lados para que o efeito parallax possa ser exibido.

Dica: marque Recorte inteligente parallax em Estilos do Site para minimizar o recorte à esquerda e à direita.

Problemas com a rolagem

Se você observar problemas com a rolagem quando o parallax estiver ativado, talvez seja necessário reduzir o tamanho da página. Os navegadores carregam páginas com rolagem parallax lentamente, principalmente se o tamanho total da página for de 15 MB ou mais. Se a rolagem ainda não estiver correta, ou se você não quiser reduzir o tamanho da página, considere desativar o parallax

Este artigo foi útil?
Utilizadores que acharam útil: 94 de 236