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.

Comentários

Esse site utiliza o Akismet para reduzir spam. Aprenda como seus dados de comentários são processados.

        1. Olá Madson, sim, já revisei os código, estão correto, acredito que possa ter errado algum detalhe na aplicação do efeito, reveja a video aula para ver se seguiu completamente certo, caso não, realmente não funciona.

  1. Alan excelente material, parabéns! Mas uma dúvida, como ja apliquei o efeito de

    Smooth Scrolling os dois não funcionam juntos né? Tentei aplicar este e não deu certo.

  2. Meu camarada, vc é demais! Parabéns pela sua didática e por disponibilizar seu tempo para ajudar as pessoas que assim como eu não entendem de programação! 🙂 Obrigado mesmo! 🙂

  3. Alan, pode me dar uma ajudinha com os outros efeitos que não sejam de fade in? por exemplo os atenttions seekers 🙂

    1. tentei usar o mesmo esquema, só mudando o efeito de fadeInLeft para shake por exemplo… mas o elemento não apareceu rsrs

      1. Humm, é por que quando quer que o elemento apareça, é preciso que seja algum efeito de entrada, ou seja, os que tem In, pois senão, ele vai realizar o efeito sem entrada, no caso se a camada estiver oculto inicialmente, realizará o efeito ocultamente.

  4. Alan, tudo bem? Queria inicialmente agradecer por compartilhar todo esse conteúdo, muito obrigado! Também tenho uma dúvida, eu apliquei esse efeito na minha página, porém depois de alguns dias ele sumiu e não voltou funcionar mais, tentei criar uma nova e mesmo assim não consegui aplicar novamente, você poderia me ajudar?

    Essa mensagem aparece no meu console:

    Failed to load resource: net::ERR_FAILED
    SVG’s SMIL animations (, , etc.) are deprecated and will be removed. Please use CSS animations or Web animations instead.
    Failed to load resource: net::ERR_FAILED

    1. Olá Ge, recentemente tive um problema com meu servidor de CDN, por isso ficou sem funcionar por uns dias, mas já esta tudo resolvido, talvez seja preciso você revisar as URL e limpar o cache da página.

      Qualquer coisa retorna aqui que verifico mais a fundo seu problema

19 Mais Comentários