Como implementar a rolagem parallax

Como funciona

O efeito Parallax permite alterar a posição de uma imagem em relação a outros objetos. Você pode configurar a rolagem não convencional de sua página por meio de um código HTML personalizado e tornar seu site mais atraente. Você pode usar uma solução existente ou adicionar seu próprio código.

Como obtê-lo

Usando uma solução existente

  1. Abra seu projeto na Conta de Distribuidor.
  2. Na barra lateral, clique em Site Builder.
  3. Clique em Abrir Site Builder.
  4. Insira o seguinte código no bloco de Código personalizado :
Copy
Full screen
Small screen
<div class="img-holder" data-image="https://cdn.xsolla.net/files/uploaded/2340/4c9ab2e4036d41e2b31c4e6e01a5a7c6.jpeg"></div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
  var script = document.createElement('script');
  script.src = "https://cdn.jsdelivr.net/npm/parallax-imagescroll@0.2.3/jquery.imageScroll.min.js";
  script.addEventListener('load', function() {
    $('.img-holder').imageScroll({
      holderClass: 'sb-image-holder',
      speed: 0.5
    });
  });
  document.getElementsByTagName('body')[0].appendChild(script);
</script>

  1. Para aplicar o efeito Parallax a uma imagem, coloque um link a essa imagem no atributo data-image.
  2. Clique em Visualizar para ver suas alterações.

Assista ao vídeo tutorial desta instrução:


Como adicionar seu próprio código

  1. No Builder, clique em Adicionar bloco e escolha Código personalizado.
  1. Insira seu próprio código no bloco.
Este artigo foi útil?
Obrigado!
Podemos melhorar alguma coisa? Mensagem
Que pena ouvir isso
Explique porque este artigo não foi útil para você. Mensagem
Obrigado pelo seu feedback!
Avaliaremos sua mensagem e a usaremos para melhorar sua experiência.

Links úteis

Última atualização: 22 de Janeiro de 2024

Encontrou um erro de texto ou digitação? Selecione o texto e pressione Ctrl+Enter.

Relatar um problema
Nós sempre avaliamos nossos conteúdos. Seu feedback nos ajuda a melhorá-los.
Forneça um e-mail para que possamos responder
Obrigado pelo seu feedback!