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 :

<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>

5. Para aplicar o efeito Parallax a uma imagem, coloque um link a essa imagem no atributo data-image.
6. 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.

2. Insira seu próprio código no bloco.

Avalie esta página

Podemos melhorar alguma coisa? Enviar

Não quero responder

Obrigado pelo seu feedback!

Links úteis