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 galeria sem parallax, ou com seções de conteúdo que não têm imagens 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: 90 de 224