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 :

 1<div class="img-holder" data-image="https://cdn.xsolla.net/files/uploaded/2340/4c9ab2e4036d41e2b31c4e6e01a5a7c6.jpeg"></div>
 2<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
 3<script>
 4  var script = document.createElement('script');
 5  script.src = "https://cdn.jsdelivr.net/npm/[email protected]/jquery.imageScroll.min.js";
 6  script.addEventListener('load', function() {
 7    $('.img-holder').imageScroll({
 8      holderClass: 'sb-image-holder',
 9      speed: 0.5
10    });
11  });
12  document.getElementsByTagName('body')[0].appendChild(script);
13</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.

Links úteis