Como Fazer um Efeito Appear (Aparecer) no OptimizePress

Olá, estou aqui para mais um post ensinando você a como criar um efeito para o seu OptimizePress, e dessa vez, a pedido do Chagas Silva que veio atrás de mim perguntando Como Fazer um Efeito Appear (Aparecer) no OptimizePress, que seja fácil de aplicar e muito funcional.

Assim, tive a ideia de fazer, como fiz sobre quando me perguntaram sobre Como Fazer Efeito Smooth Scrolling no OP

Efeito Appear (Aparecer)

Para começar a falar do Efeito Appear, quero dizer a você o que é e como ele funciona, para que você possa entender para quando seguir o vídeo abaixo para aplicar em seu site.

O Que é?

Definição: o Efeito Appear é um novo método de apresentar para os visitantes de um site, os elementos ao realizar em deslizamento sobre a página acessada. Efeito esse que faz aparecer os elementos com efeitos de suavização, slider, zoom ou até mesmo por push, tornando assim o site mais agradável ao usuário.

Como Fazer?

Para que esse efeito funcione perfeitamente existe inúmeras formas, mas, no OptimizePress, eu resolvi buscar qual seria a forma mais simples de criar esse simples efeito no OptimizePress.

Aplicando o Efeito

No vídeo abaixo, você verá como pode fazer o Efeito Appear (Aparecer) e como deve aplicar em seu site.

Parte 1 – Explicação do Código e Seu Funcionamento

Para que você possa entender como funciona esse efeito em seu site, vou mostrar para você o código necessário e em seguida estarei explicando linha por linha desse código.

Bom, deixe-me te explicar melhor:

  1. Nessa linha, você faz a chamada do jQuery, que é uma biblioteca JavaScript que permite centenas de ações, e hoje, estou usando para criar o Efeito Appear.
  2. Já nessa linha você faz a chamada do arquivo animate.css que eu tenho armazenado em meu CDN, indico que utilize o meu, pois realizei algumas alterações para utilizar para melhorar o efeito.
  3. Aqui faz a chamada de um outro arquivo em meu CDN, porem agora é um JavaScript chamado viewportchecker.js que é responsável por verificar quando o scroll chega em determinadas partes.
  4. Aqui você faz a abertura para criar um JavaScript.
  5. O comando nessa linha, é responsável por executar toda a função que faz o Efeito Appear acontecer logo quando a página carregar.
  6. Agora, você cria uma função que procura o elemento que contiver a class .appear_element (que explicarei mais a frente) e adiciona a class appear_hidden que tem a responsabilidade de esconder o elemento até que o viewportchecker verifique que foi deslizada a página até o ponto determinado.
  7. Nessa linha, ele exclui a class appear_hidden quando o scroll chega ao elemento.
  8. E agora ele adiciona as classes appear_visible que é responsável por fazer o elemento aparecer, adiciona a class animated que faz a chamada para o arquivo animate.css para que possa ativar o efeito que será chamado na próxima etapa do tutorial.
  9. Aqui você delimita em que momento o elemento deve ser ativo, conforme eu disse acima, aqui faz você delimitar que (no exemplo) quando chegar a 300px de distancia da parte inferior do navegador, a ação de adicionar as class e remover a classe appear_hidden seja executada.
  10. 11.  12. Fechamento das tags e comandos abertos.

Bom acredito que tenha entendido a explicação do código, caso não tenha entendido, pode deixar o seu comentário no final da página que em breve eu respondo, ou me envie um e-mail para falecom@alanmosko.com.br.

Voltando ao tutorial, agora vamos para a segunda parte do processo, que é adicionar o efeito nos elementos, a forma de aplicar você pode ver no vídeo acima, por tanto só estarei explicando aqui o código utilizado nesse momento da aplicação.

Parte 2 – Aplicação do Efeito

Agora vem a parte mais importante, que é a que você determina qual será o efeito de entrada do elemento na página de seu site.

Para que você possa entender, vou explicar por cada atributo na <div> acima e suas importâncias.

  1. data-vp-add-class=”NomeDoEfeito”: Esse atributo é aonde você deve colocar qual efeito da biblioteca animate.css será executado para entrar o elemento.
  2. class=”appear_element”: Esse atributo é o mais importante de todos, pois é ele que determina em qual elemento a função criada no código acima deverá ser executada.
  3. </div>: É de suma importância que você coloque o fechamento da <div> na parte que se refere a códigos após o elemento.

Revisão

Nesse post eu trouxe para você a forma mais simples de como criar um Efeito Appear(Aparecer) para você utilizar no OptimizePress (ps. esse código pode ser utilizado também fora do OptimizePress).

  • O Que é? – É um efeito de entrada de elementos na página.
  • Como Fazer? – Através de um simples código JavaScript utilizando a biblioteca jQuery.
  • Aplicando o Efeito – Vídeo Aula que ensino como você pode aplicar em seu site.
  • Explicação do Código – Você poderá ver um comentário que faço explicando cada linha do código.
  • Aplicação do Efeito – Comentários sobre as linhas necessárias para aplicar o efeito ao elemento e suas importâncias.

Muito obrigado pela sua atenção e se você gostou compartilhe com seus amigos também, pois isso é muito importante para me ajudar a continuar passando novos conteúdos e deixe um comentário com alguma dúvida que tenha nos comentários abaixo ou se preferir algo mais privado, pelo botão vermelho ao lado esquerdo da página você também pode.

Que a Força Esteja Contigo, Até logo.

Tags: | | | | | | | | | | | | |

Sobre o Autor

Alan Mosko
Alan Mosko

Um jovem com ideias loucas, que resolveu encarar a internet com apenas 14 anos, buscando aprender a trabalhar online. E com muita dedicação, hoje me tornei uma referência em automação, estruturação de negócios digitais e qualificação de emails.