Rolagem parallax na versão 7.0

Ultima atualização 23 de Agosto de 2024

Confira as configurações de rolagem parallax e dicas para solucionar problemas.

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.

Dica

Para produzir um efeito de rolagem de paralaxe semelhante na Versão 7.1, use os efeitos de imagem de fundo.

Veja um exemplo de rolagem parallax no template Burke:

parallax_scroll_download.gif

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ágina de layout)
  • Páginas de Layout
  • Páginas da loja
  • 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 no seu site não mostrarem o efeito da rolagem parallax, ative-o em estilos do site da família Brine:

  1. Abra o painel "Estilos do site".
  2. Role 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 no site, siga os mesmos passos, mas desmarque Ativar parallax.

Adicionar imagens em destaque

Para criar o efeito de paralaxe, adicione uma imagem em destaque à sua página ou seção:

Se o efeito de paralaxe não aparecer, 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 forma de aprimorar a rolagem parallax é adicionar texto, botões ou outro conteúdo como sobreposição à imagem. 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

Para adicionar um filtro de cores a todos os banners no site, use Cor da sobreposição na seção Principal: sobreposição dos 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 de parallax nos estilos do site para minimizar o recorte à esquerda e à direita.

Problemas com a rolagem

Se ocorrerem problemas de rolagem quando a paralaxe estiver ativada, talvez seja necessário reduzir o tamanho da página.  Os navegadores podem carregar páginas de rolagem paralaxe lentamente, especialmente se o tamanho total da página for de 15 MB ou mais. Se a rolagem ainda não parecer correta ou se reduzir o tamanho da página não for uma opção para você, considere desativar a paralaxe

Footer Image
  • Peça ajuda à nossa comunidade

  • Peça ajuda à nossa comunidade sobre personalizações avançadas.

  • Contrate um Squarespace Expert

  • Ganhe destaque on-line com a ajuda de um designer ou desenvolvedor experiente.