Compatibilidade: todos os temas do Shopify.
Crie uma seção de texto de imagem animada sobreposta em seu site.
Foi possível criar uma animação sem aplicá-la em todas as seções do seu site? Sim, a maioria dos desenvolvedores web adicionará uma biblioteca externa aos para fazer o trabalho. Vamos fazer isso sem uma biblioteca. Deixe nosso código simples fazer o trabalho.
Confira a loja DEMO aqui 💻 . Senha: made4uo
O que você está comprando:
- Imagem animada cativante com texto
- Funciona bem com dispositivos móveis
- A animação é reiniciada quando o cliente volta ao topo e rola para baixo novamente
O que torna nosso código melhor:
- Não usamos bibliotecas externas, com isso dito, nosso código não terá nenhum efeito mínimo no desempenho de velocidade do seu site
- Não deixamos nem adicionamos códigos para anunciar em nosso site
- Nosso código é compatível com dispositivos móveis
Quaisquer problemas relacionados ao código serão corrigidos sem custo adicional, excluindo solicitações de customização de código. Basta entrar em contato conosco em "Converse conosco". Estamos a apenas um botão de distância.
Para iniciar.
1. Temos que adicionar uma seção, então vamos ao nosso editor de código. Na loja de administração do Shopify, abra os temas, clique em "Ações" e depois em "Editar código".
2. Abra a pasta Seções e adicione um novo arquivo. Vamos chamá-lo de "texto de imagem animada". Em seguida, cole o código abaixo.
3. Como estamos ouvindo as rolagens do usuário, vamos adicionar um código javascript. Existe uma maneira de fazer isso com CSS, mas nem todos os navegadores oferecem suporte. Enfim, na pasta Asset, abra o global.js.
É isso.
Nota: eu sugeriria colocá-la como uma terceira seção ou superior, para que o javascript tenha tempo de rolar e chamar a animação
Copied!