Animar elementos no scroll da página

6 de dezembro de 20144 Comentários

Animação no scroll da página

A animação de elementos no scroll da página é uma nova tendência da web. Para criar esse efeito, eu uso um plugin chamado WOW.

O grande ponto positivo do WOW é que ele é mais leve que os plugins em parallax.

Passo a passo para usar o plugin WOW:

1) Baixar o plugin WOW no github do autor

2) Baixar o animate.css , que é o responsável pelas animações do script.

3) Chamar o css animate.css no <head></head>:

4) Chamar o wow.min.js e iniciar o plugin:

5) Para fazer as animações, basta inserir a class .wow no elemento que deseja animar. Para escolher o tipo de animação, basta colocar a class com o mesmo nome da animação. Você pode conferir todos os tipos aqui.

O plugin permite também algumas configurações interessantes:

  • data-wow-duration: Você escolhe qual a duração daquela animação para determinado elemento.
  • data-wow-delay: Quantos segundos até a animação começar.
  • data-wow-offset: Distância, em relação ao rodapé, para iniciar a animação.
  • data-wow-iteration: Quantas vezes a animação vai se repetir.

Alguns exemplos de site que usam o WOW:

http://news.microsoft.com/stories/garage/index.html

http://popcorn-time.se/

Comentários

  • Douglas Delucca

    muito bom 🙂

  • Elvis

    thanks 🙂

  • Eduardo Pereira

    Preciso pagar para usar o WOW?