Configurações

Efeitos

Efeitos de animação parallax nas landing pages


Através do Google Tag Manager é possível deixar suas landing pages animadas com efeitos de rolagem dinâmicos.


Você pode animar os blocos criados através do menu "Estilo" ou verificar o código para atribuir o dado a uma classe existente.


O processo é bem simples:


1- Acesse sua conta do Google tag manager ou crie uma nova conta para vincular o ID na sua landing page. 

Clique aqui, caso você tenha interesse em verificar um tutorial de como realizar esse processo.


Agora, insira o Identificador através da guia "Documento".



2- Depois que tivermos o vínculo entre as plataformas, basta acessar a área de trabalho do GTM e adicionar uma nova TAG:




3- Você deverá nomear a tag para identificá-la no Google Tag Manager e selecionar a opção de utilização de HTML personalizado:




4- Vamos utilizar um plugin de licença gratuita que permite adicionar efeitos de transição em cada um dos elementos ou imagens da sua landing page.


O plugin se chama "SimpleParallax" e está disponível para inserção através de um código.


Você pode acompanhar o preview dos efeitos através desta página e escolher qual será pertinente adicionar em sua landing page.


Para que seja possível informar ao GTM qual o bloco ou imagem deve receber o efeito desejado, você deve atribuir a animação a uma classe, tag ou Id do código HTML.


Dica: Sempre que você criar um novo bloco e nomeá-lo, esse nome será o mesmo atribuído ao ID do estrutura, tornando possível realizar ações com o bloco criado exclusivamente.


No sistema:


Como o bloco é criado no código HTML:


Em nosso exemplo vamos usar uma TAG comum em todo o documento chamada "img" que faz referência a todas as figuras. 


Depois de escolher qual será o elemento, você deverá copiar e colar o código abaixo na Tag do GTM mantendo exatamente igual caso queira aplicar para todas as imagens ou substituir o "img" e variável criada pela tag, classe ou id desejado:


<script src="https://cdn.jsdelivr.net/npm/simple-parallax-js@5.2.0/dist/simpleParallax.min.js"></script>

<script>
var images = document.querySelectorAll('img');
new simpleParallax(images, {
  scale: 1.5
});
</script>






5- Ative a tag com o gatilho de visualização de página ou o de sua preferência e publique o conteúdo:




Prontinho, vamos analisar como ficou a animação?