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

1. Abra seu projeto na Conta de Distribuidor e acesse a seção Vitrines > Websites.
2. Na seção Sites, selecione seu site e então Abrir Site Builder.
3. Se seu site incluir múltiplas páginas, selecione a que você precisa:
   1. Selecione o título da página atual no topo do construtor.
   2. Selecione a página necessária na lista suspensa.
4. Em qualquer lugar na página, selecione Adicionar bloco.
5. Selecione o bloco Código personalizado.
6. Adicione o código HTML com o script de efeito de uma de 2 maneiras:
   • Use seu próprio código.
   • Use o script pré-pronto. Para fazer isso:
     1. Insira o seguinte código no bloco:

 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/parallax-imagescroll@0.2.3/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>

1. 1. 2. Para aplicar o efeito Parallax em uma imagem, coloque um link a esta imagem no atributo data-image.

7. Selecione Prévia para ver suas alterações.

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

Links úteis