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
- Abra seu projeto na Conta de Distribuidor.
- Na barra lateral, clique em Site Builder.
- Clique em Abrir Site Builder.
- Insira o seguinte código no bloco de Código personalizado :
Copy
- html
<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>
- Para aplicar o efeito Parallax a uma imagem, coloque um link a essa imagem no atributo
data-image
. - Clique em Visualizar para ver suas alterações.
Assista ao vídeo tutorial desta instrução:
Como adicionar seu próprio código
- No Builder, clique em Adicionar bloco e escolha Código personalizado.
- Insira seu próprio código no bloco.
Este artigo foi útil?
Obrigado pelo seu feedback!
Avaliaremos sua mensagem e a usaremos para melhorar sua experiência.Links úteis
Última atualização: 22 de Janeiro de 2024Encontrou um erro de texto ou digitação? Selecione o texto e pressione Ctrl+Enter.